React最常見的性能優化之避免組件重覆渲染

##前言在 React 開發中如果不去管組件的重覆渲染問題，項目稍微複雜一點性能將不堪入目，下麵將介紹項目中最常見的例子及解決方案（僅 hooks 組件）。 ##預先瞭解所用知識 React.memo React.useCallback React.useMemo 沒錯，只需使用上面三點即可解決大 ...

前言

在 React 開發中如果不去管組件的重覆渲染問題，項目稍微複雜一點性能將不堪入目，下麵將介紹項目中最常見的例子及解決方案（僅 hooks 組件）。

預先瞭解所用知識

React.memo
React.useCallback
React.useMemo

沒錯，只需使用上面三點即可解決大多數組件重覆渲染問題，而如何合理去使用呢？

例1: 父組件狀態更新導致子組件無效渲染

const Parent = () => {
  const [count, setCount] = useState(0);
  const [son1Count, setSon1Count] = useState(0);
  const [son2Count, setSon2Count] = useState(0);
  return (
    <div>
      {console.log("Parent render")}
      <button onClick={() => setCount(v => v + 1)}>Parent + 1</button>
      <button onClick={() => setSon1Count(v => v + 1)}>Son1 + 1</button>
      <button onClick={() => setSon2Count(v => v + 1)}>Son2 + 1</button>
      <h3>Parent: {count}</h3>
      <Son1 son1Count={son1Count} />
      <Son2 son2Count={son2Count} />
    </div>
  );
};
const Son1 = (props) => {
  return (
    <div>
      {console.log("Son1 render")}
      Son1: {props.son1Count}
    </div>
  );
};
const Son2 = (props) => {
  return (
    <div>
      {console.log("Son2 render")}
      Son2: {props.son2Count}
    </div>
  );
};

可以看出，無論改變哪個值，所有組件都重新渲染了，理想情況是改變 count 值實際並不需要 Son1 和 Son2 組件重新渲染，改變 son1Count 也不需要 Son2 重新渲染，簡而言之就是子組件所依賴的值沒發生變化就不需要重新渲染，上面情況只需將子組件用 React.memo 包裹即可:

const Son1 = React.memo((props) => {
  return (
    <div>
      {console.log("Son1 render")}
      Son1: {props.son1Count}
    </div>
  );
});
const Son2 = React.memo((props) => {
  return (
    <div>
      {console.log("Son2 render")}
      Son2: {props.son2Count}
    </div>
  );
});

可以看到輕鬆包裹一下就已經達到理想效果，React.memo 本質就是一個高階組件(HOC)，通過淺比較(比較棧記憶體中的值) props、state 和 render 的內容來判斷是否需要重新渲染組件。而有時候子組件不得不依賴父組件的值，但這個依賴的值發生改變又不需要重新渲染組件怎麼辦，接著看下麵例2。

例2: 自定義子組件是否重新渲染

const Parent = () => {
  const [random, setRandom] = useState(Math.random());
  const [nowTime, setNowTime] = useState(new Date().toLocaleString());
  const timerRef = useRef();
  useEffect(() => {
    timerRef.current = setInterval(() => {
      setRandom(Math.random());
    }, 1000);
    return () => {
      clearInterval(timerRef.current);
    };
  });
  return (
    <div>
      {console.log("Parent render")}
      <h3>random: {random}</h3>
      <button onClick={() => setNowTime(new Date().toLocaleString())}>
        點擊更新子組件
      </button>
      <Son random={random} nowTime={nowTime} />
    </div>
  );
};
const Son = React.memo(
  (props) => {
    return (
      <div>
        {console.log("Son render")}
        <p>
          {props.nowTime}父組件 random 值為: {props.random}
        </p>
      </div>
    );
  }
);

上面例子中，子組件依賴父組件 random 和 nowTime，而子組件理想是在點擊按鈕 nowTime 發生改變後才重新渲染組件顯示 random 的值，不需要上面那樣實時渲染，此時只需要在 React.memo 第二個參數自定義渲染規則即可，React.memo 第二個參數為可選參數：

function memo<P extends object>(
    Component: FunctionComponent<P>,
    propsAreEqual?: (prevProps: Readonly<PropsWithChildren<P>>, nextProps: Readonly<PropsWithChildren<P>>) => boolean
): NamedExoticComponent<P>;

看函數簽名可知，第二個參數可傳一個回調函數，回調函數會有兩個形參，props 狀態改變前的值和改變後的值，返回值為一個布爾值，true 禁止重新渲染，false 將重新渲染，和以往 class 組件中的 shouldComponentUpdate 生命周期鉤子用法很像，下麵加入自定義渲染判斷條件，即只在 props.nowTime 發生改變時進行重新渲染:

const Son = React.memo(
  (props) => {
    return (
      <div>
        {console.log("Son render")}
        <p>
          {props.nowTime}父組件 random 值為: {props.random}
        </p>
      </div>
    );
  },
  (prevProps, nextProps) => prevProps.nowTime === nextProps.nowTime
);

從上圖可見只有 props.nowTime 發生改變才會重新渲染。第二個參數的判斷規則在實際開發中還有很多妙用，比如一些情況可以替代 useCallback，後面會提一下。

例3: 向子組件傳遞方法(狀態提升)導致子組件無效渲染

const Parent = () => {
  const [count, setCount] = useState(0);
  const [sonCount, setSonCount] = useState(0);
  const allPlus = () => {
    setCount(v => v + 1);
    setSonCount(v => v + 1);
  };
  return (
    <div>
      {console.log("Parent render")}
      <button onClick={() => setCount(v => v + 1)}>Parent + 1</button>
      <h3>Parent: {count}</h3>
      <Son allPlus={allPlus} sonCount={sonCount} />
    </div>
  );
};
const Son = React.memo((props) => {
  return (
    <div>
      {console.log("Son render")}
      <p>Son: {props.sonCount}</p>
      <button onClick={props.allPlus}>All + 1</button>
    </div>
  );
});

從控制台輸出可以看見，當傳遞一個方法給子組件時，就算使用 React.memo 進行包裹也不濟於事，導致該問題出現的根本原因是當 count 發生改變導致父組件發生重新渲染，Parent 組件本質也是一個函數，所以 const allPlus = () => { setCount(count + 1); setSonCount(sonCount + 1); }; 也會重新執行一次，這就意味著 allPlus 已經重新賦值，此時雖然看起來沒什麼變化，實際上 allPlus 在棧記憶體中的地址已經改變，而 React.memo 預設正是通過淺比較決定是否重新渲染，也就導致只要父組件發生重繪，子組件一定會跟著無效重繪。
使用 React.useCallback 緩存函數解決子組件無效渲染，只需將上面 allPlus 方法使用 useCallback 包裹：

const allPlus = useCallback(() => {
    setCount(v => v + 1);
    setSonCount(v => v + 1);
  }, []);

function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;

從 useCallback 函數簽名看到，需要傳遞兩個參數，第一個傳需要緩存的函數，第二個是依賴值，其本質就是返回的是一個 memoized（緩存）函數，在依賴不變的情況下，多次定義的時候，返回的值是相同的，他的實現原理是當使用一組參數初次調用函數時，會緩存參數和計算結果，當再次使用相同的參數調用該函數時，會直接返回相應的緩存結果，上面例子依賴值為空數組，所以無論怎樣 allPlus 棧記憶體值都不會變，也就不會觸發子組件無效重繪。
在向子組件傳遞方法時在項目中很多時候會懶得專門聲明一個函數綁定到子組件，例如：

<Son
    onClick={() => {
      setCount((v) => v + 1);
      setSonCount((v) => v + 1);
    }}
    sonCount={sonCount}
/>

如果不會有性能影響自然無所謂，但若是觸發無效重繪就需要考慮了。
註意: 依賴值一定要謹慎處理，根據實際情況設定，例如上面例子 allPlus 中 setState 都是採用回調函數傳參，假如改成直接傳參，而又不給定依賴值，就會造成緩存的函數中無法獲取最新值，例如上述例子 allPlus 改為：

const allPlus = useCallback(() => {
    setCount(count + 1);
    setSonCount(sonCount + 1);
}, []);

很明顯看到 All + 1 後 setCount 中 count 並不是最新值，而是上一次緩存函數時的值，所以緩存函數在添加依賴時需要視情況而定，否則出現 bug 排查起來時可能會令人頭痛不已。

例4: 妙用 React.memo 或 React.useMemo 防止子組件無效渲染

將例3 中 allPlus 方法不使用 useCallback 緩存，通過子組件 React.memo 第二個參數自定義渲染規則達到目的：

const Parent = () => {
  const [count, setCount] = useState(0);
  const [sonCount, setSonCount] = useState(0);
  const allPlus = () => {
    setCount(v => v + 1);
    setSonCount(v => v + 1);
  };
  return (
    <div>
      {console.log("Parent render")}
      <button onClick={() => setCount((v) => v + 1)}>Parent + 1</button>
      <h3>Parent: {count}</h3>
      <Son allPlus={allPlus} sonCount={sonCount} />
    </div>
  );
};
const Son = React.memo(
  (props) => {
    return (
      <div>
        {console.log("Son render")}
        <p>Son: {props.sonCount}</p>
        <button onClick={props.allPlus}>All + 1</button>
      </div>
    );
  },
  (prevProps, nextProps) => prevProps.sonCount === nextProps.sonCount
);

使用 useMemo 緩存 allPlus 方法，useMemo 和 useCallback 一樣第一個參數傳回調函數，第二個傳依賴值，它們不同的地方在於 useMemo 緩存的是第一個參數回調函數的返回值，而 useCallback 直接緩存第一個參數，也就是回調函數：

const Parent = () => {
  const [count, setCount] = useState(0);
  const [sonCount, setSonCount] = useState(0);
  const allPlus = useMemo(
    () => () => { // 註意這裡不同於 useCallback
      setCount((v) => v + 1);
      setSonCount((v) => v + 1);
    },
    []
  );
  return (
    <div>
      {console.log("Parent render")}
      <button onClick={() => setCount((v) => v + 1)}>Parent + 1</button>
      <h3>Parent: {count}</h3>
      <Son allPlus={memoizedAllPlus} sonCount={sonCount} />
    </div>
  );
};
const Son = React.memo((props) => {
  return (
    <div>
      {console.log("Son render")}
      <p>Son: {props.sonCount}</p>
      <button onClick={props.allPlus}>All + 1</button>
    </div>
  );
});

這樣也能達到效果，但不建議這樣操作，因為 useMemo 在設計上實際用處在於緩存數據，例如對一個很大的數據做二次處理，避免每次渲染做無意義的計算導致性能降低，而 useCallback 才是為緩存函數而生。

總結

雖然看上去只用了 React.memo、React.useCallback、React.useMemo 這三個，甚至 React.useMemo 都算不上就能處理組件的重覆渲染問題，但在實際操作過程中考慮的因素也不少，當然有時候甚至也可以不用去管重覆渲染問題，例如一個頁面中組件拆分的少，業務並不複雜，此時看見函數就去緩存，看見組件就用 React.memo 包裹，這樣性能沒什麼變化反而是畫蛇添足。另外若項目複雜但盲目大量的去使用 React.memo、React.useCallback、React.useMemo，依賴值或判斷規則不去綜合實際情況處理，在 debug 時很可能會讓人痛不欲生且還會有記憶體泄露風險。