一篇帶給你 React.memo 如何使用？
大家好，我是前端西瓜哥。
最近做的新功能有性能問題，所以我想嘗試優化一下 React 組件的性能。下面我們來好好學習一下 React.memo 的用法。
組件狀態更新和重渲染
當某個組件里的狀態發生改變時，React 會調用該組件的 render 方法，生成新的 React 元素樹，和原來的虛擬 DOM 對比，找出不同的地方然后給真實的 DOM 打補丁。
如果有子組件，它也會被重新渲染。
這里有一個問題：有些子組件其實并沒有發生狀態改變，也被重新渲染，占用了 CPU 資源。
雖然這個操作是不必要的，但 React 并不能知道傳給子組件的 props 是否發生了改變。
但 React 提供了 React.memo() 方法，希望你能通過它來告知 React 該組件是否跳過重渲染。
React.memo
React.memo 是一個 高階組件。
所謂高階組件，其實指的就是一個接收組件并返回一個組件的函數。起名參考了高階函數，但確實花里胡哨了一些。
React.memo 的作用是 緩存 組件，它會對傳入的組件加上緩存功能生成一個新組件，然后返回這個新組件。
在傳給組件的 props 的屬性和值沒有發生改變的情況下，它會使用最近一次緩存的結果，而不會進行重新的渲染，實現跳過組件渲染的效果。
下面是一個示例：
const Comp = ({ color }) => { return ( <div> <div>{color}</div> </div> );};// 生成一個可以緩存結果的組件const MemoriedComp = React.memo(Comp);
當我們使用 MemoriedBox 時，如果傳入的 props.color 保持不變的話，MemoriedBox 組件就不會發生重渲染。
這里有一個演示例子：
https://codesandbox.io/s/react-memo-huan-cun-ce-shi-k96vd4。
保證 props 的有效對比
比較算法
React.memo 判斷是否使用緩存，默認使用的是淺比較，也就是只比較第一層的 key。
shallowEqual 主要是通過 Object.is 來對比。源碼實現地址如下：
https://github.com/facebook/react/blob/HEAD/packages/shared/shallowEqual.js。
有時候我們希望自定義比較方法，這時候我們可以使用 React.memo 方法的第二個參數，傳入我們自定義的比較方法。
const isEqual(prevProps, nextProps) { // 自定義對比方法}const MemoriedComp = React.memo(Comp, isEqual);
自定義比較方法會拿到兩參數：舊的和新的 props 對象，然后根據該方法的返回值來決定是否使用緩存。如果為真值，使用緩存，否則重新渲染并把新的渲染結果緩存下來。
假設我們有一個 prop 是數組，但因為聲明語句寫在組件里，所以每次渲染時都會生成一個指向新的內存空間的另一個數組，導致新舊 prop 指向不同的內存對象，但它們的數組元素卻是依次相等。
[1, 2] === [1, 2] // false
有時候我們想將它們認為 “相同”，能夠觸發 React.memo 方法的緩存。
用淺比較會返回 false，進行重渲染，不符合我們的預期。這時候就可以使用自己實現的 深比較（深度遞歸比較），可以考慮使用比較有名的 lodash.isEqual。
緩存函數
對于數組和普通對象，我們可以用深比較來判斷 “相等”。但對于函數組件中每次都會被重新構建的函數，顯然是行不通的。函數沒有結構。
對于函數，我們可以使用 useCallback。
const Comp = () => { const onClick = React.useCallback(() => { if (isOk) sumbit(); }, [isOk]) return ( <div> <Button onClick={onClick}></Button> </div> )}
useCallback 接受一個函數和一個依賴項數組，當依賴項數組里的元素沒有改變時，會使用最后一次緩存的函數，否則會使用傳入的新函數。
除了用 useCallback 緩存函數，我們還可以用 useMemo 來緩存其他的對象值。
避免負優化
- 只渲染一次，之后都不會更新的組件，不要使用 React.memo。
- props 每次都會改變的組件，不要使用 React.memo，使用 React.memo 只會帶來不必要的新舊 props 比較和無意義的緩存。
- 組件如果很簡單，不建議使用 React.memo，并不能帶來多大提升，而使用 React.memo 本身就有心智負擔。
- 如果你無法很好地量化性能，不建議使用 React.memo。
結尾
React.memo 可以幫助我們跳過一些不必要的組件渲染。但要維護好對象類型 prop 的不改變，確實對我們造成不少的心智負擔。
React.memo 并不是一定會有正收益的，因為緩存也是有成本的。
