issue
如何關(guān)聯(lián)本地分支和遠(yuǎn)程分支
- git branch --set-upstream-to=origin/remote_branch your_branch
- upstream是上游画机，上溯的意思
如何配置絕對(duì)路徑
- eject后的面目
- 新建.env文件
- NODE_PATH = src/
- 如果沒(méi)有eject的項(xiàng)目，則安裝react-app-rewired新症，在config-overrides.js中配置
const {injectBabelPlugin} = require('react-app-rewired');
const rewireReactHotLoader = require('react-app-rewire-hot-loader');
const rewireLess = require('react-app-rewire-less'); ------------------------- 引入less插件
const {addWebpackAlias} = require('customize-cra');
const rewireStyledComponents = require('react-app-rewire-styled-components');
const path = require('path');
module.exports = function override(config, env) {
config = injectBabelPlugin(
['import', {libraryName: 'antd', libraryDirectory: 'es', style: true}], ----- 使用less
config,
);
config = rewireLess.withLoaderOptions({ ---------------------------------------- antd主題
modifyVars: {"@primary-color": "#ff9c32"},
javascriptEnabled: true,
})(config, env);
config.module.rules.unshift({
test: /\.(ts|tsx)$/,
loader: require.resolve("tslint-loader"),
enforce: "pre",
});
config = rewireReactHotLoader(config, env);
config = addWebpackAlias({
['utils']: path.resolve(__dirname, 'src', 'utils'),
['src']: path.resolve(__dirname, 'src'), ------------------------------------ 絕對(duì)路徑
['themed-components']: path.resolve(__dirname, 'src', 'utils', 'themed-components')
})(config);
config = rewireStyledComponents(config, env, {
pure: true,
});
return config;
};
如何使用redux-devtools-extension
import { applyMiddleware, combineReducers, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const totalReducers = {
};
const store = createStore(
combineReducers({ ...totalReducers }),
composeWithDevTools(applyMiddleware()),
);
export default store;
antd 在 typescript 中的使用,并按需加載
- yarn add antd
- yarn add react-app-rewired --dev
- yarn add ts-import-plugin --dev
- 也可以直接使用： create-react-app my-project --scripts-version=react-scripts-ts-antd來(lái)生成架子
- https://ant.design/docs/react/use-in-typescript-cn
如何在create-react-app typescript 加入 less
注意：這是在eject后的引入less的方法
- 安裝less和less-loader yarn add less-loader less -D
- 在eject后的webpack.config.dev.js文件中步氏，找到module對(duì)象的rule數(shù)組
- https://blog.csdn.net/wu_xiao_qing/article/details/80235359
{
test: /\.css$|\.less/, ------- 修改1
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('less-loader'), ------- 修改2
options: {
importLoaders: 1,
},
},
..........
],
},
如何使用git的pre-commit鉤子，規(guī)范提交代碼
- 安裝 husky
- 安裝 lint-staged (staged是分段徒爹，階梯的意思)
- 在package.json中添加如下代碼
- https://github.com/typicode/husky
- lint-staged ( stage 指的是git中的暫存區(qū) )
- lint-staged每次提交只會(huì)檢查本次提交的內(nèi)容
- husky實(shí)現(xiàn)git hooks鉤子
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"lint-staged": "yarn run lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{ts,tsx}": [
"tslint --project tsconfig.json"
],
"*.{less}": [
"stylelint *.less"
]
},
(一)泛型
- 為什么要使用泛型戳护？
需求：一個(gè)函數(shù)金抡，傳入什么類(lèi)型的參數(shù)，就要返回什么類(lèi)型的參數(shù)
痛點(diǎn)：如果參數(shù)用any類(lèi)型腌且，返回值也用any類(lèi)型梗肝，則不清楚返回類(lèi)型
解決：使用泛型，如下
function identity<T>(arg: T): T {
return arg;
}
解析：
1. 函數(shù) identity 叫做泛型函數(shù)
2. <T>中的 T 表示 類(lèi)型變量(類(lèi)型參數(shù))铺董，即T是一個(gè)變量巫击，但是只是表示類(lèi)型，不表示值
3. identity函數(shù)的參數(shù) arg 的類(lèi)型是 T類(lèi)型
4. identity函數(shù)的返回值 也是 T類(lèi)型
--------------------
上面定義好了一個(gè)泛型函數(shù)精续，如何使用坝锰？
兩種方法：
(1) 傳入所有參數(shù)，包括類(lèi)型參數(shù)(類(lèi)型變量)
let output = identity<string>("myString"); // type of output will be 'string'
解析：類(lèi)型參數(shù)是 string重付，所以根據(jù)函數(shù)定義時(shí)的限制可以確定：傳入?yún)?shù)和返回值都要是string類(lèi)型
(2) 類(lèi)型推論
let output = identity("myString"); // type of output will be 'string'
解析：即類(lèi)型參數(shù)顷级，形參，返回值都是同一類(lèi)型确垫，形參是string弓颈，那其他兩個(gè)就是string
- 新需求：我傳入的是具有泛型參數(shù)類(lèi)型的數(shù)組，而不是直接是泛型值删掀？如何表示翔冀？
function loggingIdentity<T>(arg: T[]): T[] {
console.log(arg.length); // Array has a .length, so no more error
return arg;
}
解析：
(1) 表示傳入?yún)?shù)是參數(shù)類(lèi)型為T(mén)的數(shù)組，返回值也是類(lèi)型為T(mén)的數(shù)組披泪，而不是直接為T(mén)類(lèi)型
(2) 這可以讓我們把泛型變量T當(dāng)做類(lèi)型的一部分使用纤子，而不是整個(gè)類(lèi)型，增加了靈活性款票。
(二) 泛型類(lèi)型 ----- 泛型函數(shù)的類(lèi)型
function identity<T>(arg: T): T {
return arg;
}
let myIdentity: <T>(arg: T) => T = identity;
解析：myIdentity是一個(gè)函數(shù)控硼，類(lèi)型表示為 <T>(arg: T) => T 象颖，值是 identity函數(shù)
--------------------------
我們還可以使用帶有調(diào)用簽名的對(duì)象字面量來(lái)定義泛型函數(shù)：
function identity<T>(arg: T): T {
return arg;
}
let myIdentity: {<T>(arg: T): T} = identity;
(三) 泛型接口
interface GenericIdentityFn { -------- 接口
<T>(arg: T): T; ------------------- 一個(gè)類(lèi)型參數(shù)為T(mén)的说订，輸入?yún)?shù)類(lèi)型為T(mén)潮瓶，返回值類(lèi)型為T(mén)的函數(shù)
function identity<T>(arg: T): T {
return arg;
}
let myIdentity: GenericIdentityFn = identity;
---------------
把泛型參數(shù)當(dāng)作整個(gè)接口的一個(gè)參數(shù) （!!!!!!!!!）
interface GenericIdentityFn<T> { ------------------ 接口的參數(shù)類(lèi)型
(arg: T): T;
}
function identity<T>(arg: T): T {
return arg;
}
let myIdentity: GenericIdentityFn<number> = identity;
解析：
使用 GenericIdentityFn的時(shí)候毯辅，
還得傳入一個(gè)類(lèi)型參數(shù)來(lái)指定泛型類(lèi)型（這里是：number），鎖定了之后代碼里使用的類(lèi)型沾谜。
(四) 泛型類(lèi)
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };
(五) 泛型約束
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length); // Now we know it has a .length property, so no more error
return arg;
}
解析：
(1) <T extends Lengthwise> 表示 ( 類(lèi)型參數(shù)T ) 繼承了 ( Lengthwise接口 )
(2) Lengthwise接口表示該類(lèi)型中，有l(wèi)ength屬性
(1)
scrollTop:
代表在有滾動(dòng)條時(shí)基跑，滾動(dòng)條向下滾動(dòng)的距離也就是元素頂部被遮住部分的高度媳否。
在沒(méi)有滾動(dòng)條時(shí)scrollTop==0恒成立篱竭。單位px，可讀可設(shè)置吃媒。
offsetTop:
當(dāng)前元素頂部距離最近父元素頂部的距離,和有沒(méi)有滾動(dòng)條沒(méi)有關(guān)系赘那。
單位px兽泄，只讀元素漾月。
scrollTop
offsetTop
clientHeight
元素的高度：包括padding蜓陌，不包括border钮热，margin，滾動(dòng)條高度隧期。對(duì)block元素有效仆潮，對(duì)inline元素?zé)o效
offsetHeight
元素的高度：包括padding性置，border揍堰，滾動(dòng)條高度，不包括margin高度
scrollHeight
scrollHeight
https://www.imooc.com/article/17571
(2) intersectionObserver 自動(dòng)觀察元素是否可見(jiàn)
var io = new IntersectionObserver(callback, option);
// intersection是交叉的意思
(1) intersectionObserver構(gòu)造函數(shù)接受兩個(gè)參數(shù)
- callback ：可見(jiàn)性變化時(shí)的回調(diào)函數(shù)
- option ：配置參數(shù)凰萨，可選
(2) 生成的實(shí)例有observe，unobserve武通，disconnect 等方法
// 開(kāi)始觀察
io.observe(document.getElementById('example')); // observer方法的參數(shù)是DOM節(jié)點(diǎn)
// 停止觀察
io.unobserve(element);
// 關(guān)閉觀察器
io.disconnect();
(3) 實(shí)例的observe方法冶忱，參數(shù)是被觀察的DOM節(jié)點(diǎn)境析，如果要觀察多個(gè)節(jié)點(diǎn)，則要多次執(zhí)行該方法
(4) callback觀察器回調(diào)函數(shù)：
- callback會(huì)觸發(fā)兩次链沼，目標(biāo)元素進(jìn)入視口和離開(kāi)視口時(shí)都會(huì)觸發(fā)
- callback回調(diào)函數(shù)的參數(shù)是一個(gè)數(shù)組括勺，成員都是intersectionObserverEntry對(duì)象
- IntersectionObserverEntry對(duì)象提供目標(biāo)元素的信息疾捍，一共有七個(gè)屬性栏妖。
其中最重要的兩個(gè)屬性：
( intersectionRatio ) 和 ( isIntersecting ) 是用來(lái)判斷元素是否可見(jiàn)
- intersectionRatio 相交區(qū)域和目標(biāo)元素的比例值
- isIntersecting 目標(biāo)元素當(dāng)前是否可見(jiàn) Boolean值 可見(jiàn)為true
var io = new IntersectionObserver(
entries => {
console.log(entries);
}
);
(5) option配置對(duì)象
- root ：用于觀察的根元素宛裕，默認(rèn)是瀏覽器的視口论泛，也可以指定具體元素，
指定元素的時(shí)候用于觀察的元素必須是指定元素的子元素
- threshold ：用來(lái)指定交叉比例疲酌，決定什么時(shí)候觸發(fā)回調(diào)函數(shù)朗恳，是一個(gè)數(shù)組，默認(rèn)是[0]油航。
- rootMargin ：用來(lái)擴(kuò)大或者縮小視窗的的大小
const options = {
root: document.querySelector('.box'),
threshold: [0, 0.5, 1],
rootMargin: '30px 100px 20px'
}
實(shí)例：
https://www.w3cplus.com/vue/build-an-infinite-scroll-component-using-intersection-observer-api.html
http://www.reibang.com/p/84a86e41eb2b
http://www.reibang.com/p/f723f1145764
