React Hooks 系列 之 useCallback
介紹
useCallback 是 React Hooks 中的一個(gè)重要成員介却，它允許我們?cè)诙啻武秩局芯彺婧瘮?shù)叔营。簡(jiǎn)單來(lái)說(shuō)愕鼓，它可以幫助我們避免因?yàn)楹瘮?shù)的重新創(chuàng)建而導(dǎo)致的不必要的重新渲染代态。
const cachedFn = useCallback(fn, dependencies);
用法
1、跳過組件的重新渲染
當(dāng)你優(yōu)化渲染性能的時(shí)候惩淳，有時(shí)需要緩存?zhèn)鬟f給子組件的函數(shù)蕉毯。例如，當(dāng)你傳遞一個(gè)函數(shù)給一個(gè)被 memo 包裹的子組件時(shí)黎泣，useCallback 可以確保函數(shù)在多次渲染中保持不變恕刘，除非它的依賴發(fā)生改變。
::: details demo 代碼 <<< @/components/react/hooks/memo/FunctionInProps4.jsx :::
在上面的案例中抒倚，只有當(dāng)依賴列表中的值發(fā)生變化時(shí)褐着，getText 函數(shù)才會(huì)被重新創(chuàng)建。
2托呕、優(yōu)化自定義 Hook
當(dāng)你創(chuàng)建自定義Hook時(shí)含蓉，建議將返回的任何函數(shù)都包裹在useCallback中。這確保了Hook的使用者在需要時(shí)能夠優(yōu)化自己的代碼项郊。
::: details demo 代碼 <<< @/components/react/hooks/useCallback/useCounter.jsx :::
調(diào)用 useCallback 后大致執(zhí)行情況
graph TD
A1[調(diào)用useCallback]
B1[創(chuàng)建/獲取當(dāng)前組件的Fiber節(jié)點(diǎn)]
C1[檢查Fiber節(jié)點(diǎn)上的hooks鏈表-每個(gè)節(jié)點(diǎn)對(duì)應(yīng)一個(gè)hook]
D1[是否存在對(duì)應(yīng)的hook對(duì)象?]
E1[創(chuàng)建新的hook對(duì)象并存儲(chǔ)函數(shù)]
F1[檢查hook對(duì)象的memoizedState屬性]
G1[依賴項(xiàng)是否改變?]
H1[從memoizedState獲取函數(shù)]
I1[存儲(chǔ)新的函數(shù)]
J1[更新memoizedState屬性]
K1[返回memoized函數(shù)]
A1 --> B1
B1 --> C1
C1 --> D1
D1 -- No --> E1
D1 -- Yes --> F1
E1 --> F1
F1 --> G1
G1 -- No --> H1 --> K1
G1 -- Yes --> I1 --> J1 --> K1
