useMemo & useCallBack

在 React 中，當(dāng)父組件發(fā)生變化的時(shí)候，子組件會(huì)重新渲染一遍，但是在子組件中，有些事件我們并不想讓它執(zhí)行

在 class component 中有 shouldComponentUpdate 中可以進(jìn)行一個(gè)判斷

在 function component 中，可以用 useMemo 和 useCallback

這兩個(gè) hooks 解決的是一個(gè)重復(fù)渲染的問(wèn)題

useCallback 和 useMemo 的參數(shù)跟 useEffect 一致，他們之間最大的區(qū)別是 useEffect 會(huì)用于處理副作用，而前兩個(gè) hooks不能

useCallback 和 useMemo 的區(qū)別在于，useCallback 返回一個(gè) function，useMemo 返回一個(gè) value

換句話說(shuō)，useCallback 和 useMemo 可以做一個(gè)緩存，前者緩存一個(gè)引用，后者緩存一個(gè)值

也就是 useCallback(fn, deps) 和 useMemo(() => fn, deps) 是等價(jià)的

關(guān)于用法

useCallback

const memorizedCallback = useCallback(
    () => {
        doSomething(a, b)
    },
    [a, b]
);

當(dāng) [a. b] 不變的時(shí)候 memorizedCallback 的引用不變，即 useCallback 的第一個(gè)入?yún)⒑瘮?shù)會(huì)被緩存，從而達(dá)到性能優(yōu)化的目的

useMemo

const memorizedValue = useMemo(() => computedExpensiveValue(a, b), [a, b]);

當(dāng) [a, b] 不變的時(shí)候 memorizedValue 的值不變，即 useMemo 的第一個(gè)入?yún)⒑瘮?shù)不會(huì)執(zhí)行，從而達(dá)到節(jié)省計(jì)算量的目的

React.memo

React.memo 是一個(gè)高階組件，功能類(lèi)似于 React.PureComponent

默認(rèn)情況下，memo 會(huì)對(duì)復(fù)雜的對(duì)象做一個(gè)淺層的對(duì)比，如果想要控制對(duì)比過(guò)程，可以將自定義比較的函數(shù)通過(guò)第二個(gè)參數(shù)傳入來(lái)實(shí)現(xiàn)

function MyComponent(props) {
    /* 使用 props 渲染 */
}

function areEqual(prevProps, nextProps) {
    /*
    ...
    */
}

export default React.memo(MyComponent, areEqual);

注意：React.memo 比較的是 props，shouldComponentUpdate 比較的是 state 和 props