性能優化

React方面：

一、首屏渲染：Webpack的 new HtmlWebpackPlugin 配置loading模版

二、簡單的子組件，儘可能使用函數方式，不須要繼承Component實例化，就沒有生命週期函數了，減小內存佔用。

減小render次數：
三、子組件使用PureComponent（針對class組件），或者React.memo（針對函數式組件），減小子組件進行不必的從新渲染。
⚠️hooks只能在函數式組件中使用，React的16.8版本才能使用

//⚠️React.memo(子組件，比較函數)，比較函數，是比較當前props與nextProps，不須要從新渲染返回true，不然返回false。
//React.memo的用法
function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  若是把 nextProps 傳入 render 方法的返回結果與
  將 prevProps 傳入 render 方法的返回結果一致則返回 true，
  不然返回 false
  */
}
export default React.memo(MyComponent, areEqual); //不穿第二個比較函數，則會默認淺比較

複雜組件，本身在showComponentUpdate中寫淺比較showComponentUpdate(nextProps, nextState)

shouldComponentUpdate(nextProps, nextState) {

    for (let key in nextProps) {

        if (nextProps[key] !== this.props[key]) {

            return true;

        }
    }
    for (let key in nextState) {

        if (nextState[key] !== this.state[key]) {

            return true;

        }
    }
    return false;
}

useCallBack減小函數的重複聲明

//只有依賴項a或者b變化，纔會從新返回一個新的函數，不然，useCallback返回緩存的函數
const callback = () => {
  doSomething(a, b);
}

const memoizedCallback = useCallback(callback, [a, b])

減小重複計算，重複渲染等：
四、useMemo減小函數的重複執行，假設是一個純函數，每次輸入相同的參數，結果都是同樣的，那麼就不必重複執行。只有參數變化，才須要重複執行。

//useMemo的用法，useMemo返回緩存的變量
const callback = () => {
  doSomething(a, b);
}

const memoizedCallback = useCallback(callback, [a, b])

五、定時器、Dom監聽等在組件銷燬前註銷

六、減小在render內部定義函數，在事件綁定處定義函數，或者bind綁定this（由於會執行bind，會返回函數），不然每次render都會從新定義函數，消耗內存。

http請求方面：緩存，CDN

Webpack構建打包方面

未完待續....