大家好，我是前端西瓜哥。

最近做的新功能有性能問題，所以我想嘗試優(yōu)化一下 React 組件的性能。下面我們來好好學習一下 React.memo 的用法。

組件狀態(tài)更新和重渲染

當某個組件里的狀態(tài)發(fā)生改變時，React 會調(diào)用該組件的 render 方法，生成新的 React 元素樹，和原來的虛擬 DOM 對比，找出不同的地方然后給真實的 DOM 打補丁。

如果有子組件，它也會被重新渲染。

這里有一個問題：有些子組件其實并沒有發(fā)生狀態(tài)改變，也被重新渲染，占用了 CPU 資源。

雖然這個操作是不必要的，但 React 并不能知道傳給子組件的 props 是否發(fā)生了改變。

但 React 提供了 React.memo() 方法，希望你能通過它來告知 React 該組件是否跳過重渲染。

React.memo

React.memo 是一個 高階組件。

所謂高階組件，其實指的就是一個接收組件并返回一個組件的函數(shù)。起名參考了高階函數(shù)，但確實花里胡哨了一些。

React.memo 的作用是 緩存 組件，它會對傳入的組件加上緩存功能生成一個新組件，然后返回這個新組件。

在傳給組件的 props 的屬性和值沒有發(fā)生改變的情況下，它會使用最近一次緩存的結果，而不會進行重新的渲染，實現(xiàn)跳過組件渲染的效果。

下面是一個示例：

const Comp = ({ color }) => {  return (    <div>      <div>{color}</div>    </div>  );};// 生成一個可以緩存結果的組件const MemoriedComp = React.memo(Comp);

當我們使用 MemoriedBox 時，如果傳入的 props.color 保持不變的話，MemoriedBox 組件就不會發(fā)生重渲染。

這里有一個演示例子：
https://codesandbox.io/s/react-memo-huan-cun-ce-shi-k96vd4。

保證 props 的有效對比

比較算法

React.memo 判斷是否使用緩存，默認使用的是淺比較，也就是只比較第一層的 key。

shallowEqual 主要是通過 Object.is 來對比。源碼實現(xiàn)地址如下：

https://github.com/facebook/react/blob/HEAD/packages/shared/shallowEqual.js。

有時候我們希望自定義比較方法，這時候我們可以使用 React.memo 方法的第二個參數(shù)，傳入我們自定義的比較方法。

const isEqual(prevProps, nextProps) {  // 自定義對比方法}const MemoriedComp = React.memo(Comp, isEqual);

自定義比較方法會拿到兩參數(shù)：舊的和新的 props 對象，然后根據(jù)該方法的返回值來決定是否使用緩存。如果為真值，使用緩存，否則重新渲染并把新的渲染結果緩存下來。

假設我們有一個 prop 是數(shù)組，但因為聲明語句寫在組件里，所以每次渲染時都會生成一個指向新的內(nèi)存空間的另一個數(shù)組，導致新舊 prop 指向不同的內(nèi)存對象，但它們的數(shù)組元素卻是依次相等。

[1, 2] === [1, 2] // false

有時候我們想將它們認為 “相同”，能夠觸發(fā) React.memo 方法的緩存。

用淺比較會返回 false，進行重渲染，不符合我們的預期。這時候就可以使用自己實現(xiàn)的 深比較（深度遞歸比較），可以考慮使用比較有名的 lodash.isEqual。

緩存函數(shù)

對于數(shù)組和普通對象，我們可以用深比較來判斷 “相等”。但對于函數(shù)組件中每次都會被重新構建的函數(shù)，顯然是行不通的。函數(shù)沒有結構。

對于函數(shù)，我們可以使用 useCallback。

const Comp = () => { const onClick = React.useCallback(() => {  if (isOk) sumbit(); }, [isOk])    return (   <div>     <Button onClick={onClick}></Button>    </div>  )}

useCallback 接受一個函數(shù)和一個依賴項數(shù)組，當依賴項數(shù)組里的元素沒有改變時，會使用最后一次緩存的函數(shù)，否則會使用傳入的新函數(shù)。

除了用 useCallback 緩存函數(shù)，我們還可以用 useMemo 來緩存其他的對象值。

避免負優(yōu)化

• 只渲染一次，之后都不會更新的組件，不要使用 React.memo。
• props 每次都會改變的組件，不要使用 React.memo，使用 React.memo 只會帶來不必要的新舊 props 比較和無意義的緩存。
• 組件如果很簡單，不建議使用 React.memo，并不能帶來多大提升，而使用 React.memo 本身就有心智負擔。
• 如果你無法很好地量化性能，不建議使用 React.memo。

結尾

React.memo 可以幫助我們跳過一些不必要的組件渲染。但要維護好對象類型 prop 的不改變，確實對我們造成不少的心智負擔。

React.memo 并不是一定會有正收益的，因為緩存也是有成本的。