React中函數式組件進行優化

轉載請注明原出處 原文博客地址： Vincent'Blog React中函數式組件進行優化

React 性能優化的思路

React 性能優化的方向可以分為以下兩方面

1. 減少render的次數，在react最花時間的一塊reconction階段(diff)，如果不render，就不會reconction。
2. 減少計算，主要是減少重復計算，對於函數組件而言，每次的render都會重新執行這個函數。

Class Component組件優化的API主要是shouldComponentUpdate和PureComponent，這兩個API的解決思路是減少重新render的次數，主要是減少父組件更新而子組件也更新的情況。

函數式組件沒有實例，如何做性能優化？

• Hook 內部使用Object.is來比較新/舊state是否相等

• 與Class中的setState方法不同

  1. 如果你修改狀態的時候，傳的狀態值沒有變化，則不會重新渲染。
  2. useState不會自動合並更新對象。可以用函數式組件的setState結合拓展運算符來達到合並更新的效果。

• 減少渲染次數

  1. 默認情況下，只要父組件的狀態變了，子組件也會重新渲染。
  2. 使用React.memo，將函數組件傳遞給memo之后，就會返回一個新的組件，如果memo接受到的屬性不變，則不會重新渲染。
  3. 使用useState來保證屬性不會改變，每次更新都是獨立的。

• useCallback 接受一個內聯回調函數參數和一個依賴項數組，useCallback會返回該回調函數的memoized版本。這個回調函數僅僅會在某個依賴改變時才會更新。

• useMemo 把創建函數和依賴項數組作為參數傳入useMemo，他僅會在某個依賴項改變時蔡崇信計算memoized的值。用來做值的緩存會比較更加合適。

React.memo

高階組件,但只適用於函數組件，而不適用 class 組件。React.memo 僅檢查 props 變更。
默認情況下其只會對復雜對象做淺層對比，如果想控制對比過程，需將自定義的比較函數通過第二個參數傳入來實現。

通過 React.memo 包裹的組件在 props 不變的情況下，這個被包裹的組件是不會重新渲染的，會直接復用最近一次渲染的結果。

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 傳入 render 方法的返回結果與
  將 prevProps 傳入 render 方法的返回結果一致則返回 true，
  否則返回 false
  */
}
export default React.memo(MyComponent, areEqual);

useCallback

用來緩存函數，返回值為一個記憶函數，這個記憶函數僅在某個依賴改變時才會更新。從而避免非必要的渲染。

useMemo

一般用來緩存計算的值，可以減少計算的量。
useMemo 的第一個參數就是一個函數，這個函數返回的值會被緩存起來，同時這個值會作為 useMemo 的返回值，第二個參數是一個數組依賴，如果數組里面的值有變化，那么就會重新去執行第一個參數里面的函數，並將函數返回的值緩存起來並作為 useMemo 的返回值 .

轉載請注明原出處 原文博客地址： Vincent'Blog React中函數式組件進行優化