React—useMemo與useCallback

看到“memo”這個字眼，很多人應該會想到memo方法。這是一個高階函數，它會返回一個函數組件，作用相當於PureComponent。

而useMemo的作用也有點像，只不過它不是作用在函數組件上，而是在一段邏輯上，例如：

const [count, setCount] = useState(0);

const doubleCount = useMemo(() => {
    return 2 * count;
}, [count]);

useMemo的用法與useEffect非常相似，如果第二個參數爲空則函數組件每次被渲染，useMemo內的邏輯都會被執行。如果第二個參數爲一個空數組，那麼僅會在組件第一次被渲染時執行。其他的情況都是在數組內元素完全相同時纔不執行。

那麼上面代碼中的doubleCount是依賴count計算出來的，那麼很顯然當count沒有發生變化，doubleCount計算出的結果也不會變化，因此也就沒有必要重複計算，這就是useMemo最主要的作用，就是性能優化的手段。

在上面的代碼中，useMemo內的計算依賴於count，因此需要把count添加到第二個參數中。理論上所有useMemo內依賴的變量都一個添加到第二個參數中。

需要注意的是，useMemo儘管看起來跟useEffect用法很像，但是useEffect是執行在渲染完成後，而useMemo則是在渲染期間執行的，所以useMemo中不要執行一些有副作用的操作。

---

給子組件傳遞迴調函數時，會出現因爲每次傳遞給子組件的回調函數的句柄不同（邏輯相同）而出現的不必要的渲染。因此我們希望能夠傳遞給子組件句柄相同的回調函數。那麼就可以用到useMemo了：

const callback useMemo(()=>{
    return () => {
        console.log('this is a callback');
    }
}, [])

而useCallback就可以理解爲一個語法糖，它省略了return：

const callback useCallback(()=>{
    console.log('this is a callback');
}, [])