跟之前一樣就好 | React.memo, useCalback, useMemo
reactjs component 的概念可以把畫面分成好多個的 component， 這樣邏輯可以分開，維護也更方便。
通常 reactjs render 的速度很快，一個 component re-render 影響到其他 component re-render 通常是感覺不出來。
不過很偶爾，就是有需要處理這種效能問題， 那就來試試 React.memo & useCalback & useMemo
React.memo
是什麼
React.memo 會去比較 component 這次收到的 prop 跟上次的 prop，如果 prop 跟上次一樣，那就用上次的結果，不用再 re-render。
React.memo 和 React.PureComponent
React.memo 和 React.PureComponent 是類似的，差別是
React.PureComponent 是給 class component 用的方法
React.memo 是給 function component 用的方法
注意
React.memo 比較的是 prop，所以 component 自身的 state 改變，當然會 re-render
This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.
React.memo 的第二個參數
React.memo 會幫我們比較 prop，不過它是shallowly的比較
簡單說就是傳 object，在比較上會被認為是不一樣(看下面的例子)
let a = "john"
let b = "john"
// true
a == b
let c = {name: "john"}
let d = {name: "john"}
// false
c == d所以如果有更複雜的比較就要透過第二個參數來傳遞我們的邏輯
function MyComponent(props) {
/* render using props */
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
export default React.memo(MyComponent, areEqual)useCalback
Returns a memoized callback. every value referenced inside the callback should also appear in the dependencies array.
useMemo
Returns a memoized value.
useCalback 和 useMemo 的差別是 useMemo 是緩存 value，所以它需要先執行一次，把值存起來
Share
