看到“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');
}, [])