useMemo
和 useCallback
接收的參數都是一樣,第一個參數為要執行的回調函數 第二個參數為要依賴的狀態,react會監聽這些狀態當這些狀態被更新會重新調用回調函數
共同作用:
當組件第一次渲染,會首次執行傳入的回調的函數,接下來如果我們的組件樹發生重新渲染,不會重新執行該函數而是直接取緩存的結果,僅僅只有依賴的狀態發生改變才會重新調用回調函數計算緩存的結果。
1.僅僅 依賴數據
發生變化, 才會重新計算結果,也就是起到緩存的作用。
兩者區別:
1.useMemo
計算結果是 return
回來的值, 主要用於 緩存計算結果的值 ,應用場景如: 需要花費大量內存(大量數組、數量)、每次js執行時間很長的函數(同步)
2.useCallback
計算結果是 函數
, 主要用於 緩存函數,應用場景如: 需要緩存的函數,因為函數式組件每次任何一個 state 的變化 整個組件 都會被重新刷新,一些函數是沒有必要被重新刷新的,此時就應該緩存起來,提高性能,和減少資源浪費。
注意: 不要濫用會造成性能浪費,react中減少render就能提高性能,所以這個僅僅只針對緩存能減少重復渲染時使用和緩存計算結果。
推薦閱讀(英文):https://www.digitalocean.com/community/tutorial_series/how-to-code-in-react-js