useMemo與useCallback使用

useMemo和useCallback的調用簽名：

function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T; function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;

useCallback和useMemo的參數跟useEffect一致，他們之間最大的區別有是useEffect會用於處理副作用，而前兩個hooks不能。

useMemo和useCallback都會在組件第一次渲染的時候執行，之后會在其依賴的變量發生改變時再次執行；並且這兩個hooks都返回緩存的值，useMemo返回緩存的變量，useCallback返回緩存的函數。

useMemo

import React from 'react';
 
 
export default function WithoutMemo() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('');
 
    function expensive() {
        console.log('compute');
        let sum = 0;
        for (let i = 0; i < count * 100; i++) {
            sum += i;
        }
        return sum;
    }
 
    return <div>
        <h4>{count}-{val}-{expensive()}</h4>
        <div>
            <button onClick={() => setCount(count + 1)}>+c1</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </div>
    </div>;
}

這里創建了兩個state，然后通過expensive函數，執行一次昂貴的計算，拿到count對應的某個值。我們可以看到：無論是修改count還是val，由於組件的重新渲染，都會觸發expensive的執行(能夠在控制台看到，即使修改val，也會打印)；但是這里的昂貴計算只依賴於count的值，在val修改的時候，是沒有必要再次計算的。在這種情況下，我們就可以使用useMemo，只在count的值修改時，執行expensive計算：

export default function WithMemo() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('');
    const expensive = useMemo(() => {
        console.log('compute');
        let sum = 0;
        for (let i = 0; i < count * 100; i++) {
            sum += i;
        }
        return sum;
    }, [count]);
 
    return <div>
        <h4>{count}-{expensive}</h4>
        {val}
        <div>
            <button onClick={() => setCount(count + 1)}>+c1</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </div>
    </div>;
}

上面我們可以看到，使用useMemo來執行昂貴的計算，然后將計算值返回，並且將count作為依賴值傳遞進去。這樣，就只會在count改變的時候觸發expensive執行，在修改val的時候，返回上一次緩存的值。

useCallback

講完了useMemo，接下來是useCallback。useCallback跟useMemo比較類似，但它返回的是緩存的函數。我們看一下最簡單的用法：

const fnA = useCallback(fnB, [a])

上面的useCallback會將我們傳遞給它的函數fnB返回，並且將這個結果緩存；當依賴a變更時，會返回新的函數。既然返回的是函數，我們無法很好的判斷返回的函數是否變更，所以我們可以借助ES6新增的數據類型Set來判斷，具體如下：

import React, { useState, useCallback } from 'react';
 
const set = new Set();
 
export default function Callback() {
    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');
 
    const callback = useCallback(() => {
        console.log(count);
    }, [count]);
    set.add(callback);
 
 
    return <div>
        <h4>{count}</h4>
        <h4>{set.size}</h4>
        <div>
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={val} onChange={event => setVal(event.target.value)}/>
        </div>
    </div>;
}

我們可以看到，每次修改count，set.size就會+1，這說明useCallback依賴變量count，count變更時會返回新的函數；而val變更時，set.size不會變，說明返回的是緩存的舊版本函數。

知道useCallback有什么樣的特點，那有什么作用呢？

使用場景是：有一個父組件，其中包含子組件，子組件接收一個函數作為props；通常而言，如果父組件更新了，子組件也會執行更新；但是大多數場景下，更新是沒有必要的，我們可以借助useCallback來返回函數，然后把這個函數作為props傳遞給子組件；這樣，子組件就能避免不必要的更新。

import React, { useState, useCallback, useEffect } from 'react';
function Parent() {
    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');
 
    const callback = useCallback(() => {
        return count;
    }, [count]);
    return <div>
        <h4>{count}</h4>
        <Child callback={callback}/>
        <div>
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={val} onChange={event => setVal(event.target.value)}/>
        </div>
    </div>;
}
 
function Child({ callback }) {
    const [count, setCount] = useState(() => callback());
    useEffect(() => {
        setCount(callback());
    }, [callback]);
    return <div>
        {count}
    </div>
}

不僅是上面的例子，所有依賴本地狀態或props來創建函數，需要使用到緩存函數的地方，都是useCallback的應用場景

多談一點

useEffect、useMemo、useCallback都是自帶閉包的。也就是說，每一次組件的渲染，其都會捕獲當前組件函數上下文中的狀態(state, props)，所以每一次這三種hooks的執行，反映的也都是當前的狀態，你無法使用它們來捕獲上一次的狀態。對於這種情況，我們應該使用ref來訪問。

源代碼：

https://github.com/anymost/hooks-demo/blob/master/src/page/Memo.js​github.com

 

https://github.com/anymost/hooks-demo/blob/master/src/page/Callback.js​github.com

原文https://zhuanlan.zhihu.com/p/66166173