第二組讀書會 5-6 5-7

[steward379]

useCallback 與 useMemo 與 Hooks API 設計思維

useCallback 與 render

首次 render 時：

useCallback 會接受你所傳入的函式以及 dependencies
陣列，記憶起來做為快取然後再將傳入的此函式回傳。

後續 re-render 時：

所有依賴項目的值與前一次render 時的版本進行比較

相同 => 忽略，回傳前一次的舊版函式
不同 => 記憶新傳入的函式和 dependencies 陣列，覆蓋舊的。回傳新的

💡每次 render 的過程中都會先 inline 建立一個
函式，然後才作為參數傳給 useCallback

render案例

核心目標：「讓函式能夠反應資料流的變化」

dependencies 誠實，但是新函式效能優化永遠都會失效，因為會重新 render

=> 使用 useCallback, 則裡頭依賴了任何資料，只有在該資料變動時， useEffect 的副作用才會被執行。

useCallback 搭配例子ㄧ：
useCallback案例

useCallback 搭配例子二：
useCallback案例二

Zet 文章

useCallback 官方文件

協助 Memo

不斷重新產生函式，所以 memo 沒用

Alert 失敗案例

• 🌰：將 alert 放入 useCallback，不重新分配記憶體位址，就可協助 Memo 正確感知到資料流變動，效能優化就能成功

Alert 成功

與 Memo 的關係：

配合 memo：快取 "component" render 的畫面結果並重用，『可節省效能成本』

內建的 Memo

• React 內建的 HOC(💡定義：可以接受一個函式，用來改造函式的函式，例如一個component）
• props 完全相同時，會直接跳過本次 render
• 資料流的變動感知
• 『可以』省效能成本

Memo 官方文件

useCallback

• 只能在 component 頂層呼叫

• 『不可以』效能優化

• 記憶『函式本身』

• 協助其他效能優化正常運作

• 第一個參數是 function (函式)

• 第二個參數可選，是 dependencies(依賴項)

接受你所傳入的函式以及 dependencies 陣列，
記憶起來做為快取然後再將傳入的此函式回傳。

useMemo

• 用來快取陣列或物件類型的資料
• 記憶『計算結果』
• 『可以』效能優化
• 節省計算複雜資料的效能成本

useMemo 官方文件

useMemo 用例

MemoizedChild 的 render 效能優化效果永遠都會失效
因為 number 陣列在每次 render 時都是全新的不同陣列

以 useMemo 進行快取陣列資料， numbers 陣列就不會每次 render 時都不同

什麼時候該使用 useMemo 跟 useCallback(iChef)

Hooks 運作原理與思維

－ 只能在頂層呼叫

⌚️ 描述「某個歷史時刻」的畫面結構 => React element
📰 儲存「最新狀態資料」的畫面節點 => fiber node

fiber node:

保存並維護目前 React 應用程式的最新狀態資料，個應用程式之中只會存在『一份』

• 一個 component 實例即意指它
• class component 時代就有

Fiber Node

Component 實例

• re-render 後資料本體就真的會被覆蓋更新

• 呼叫多個 useState 後：

  • 第二個 state 資料放在第一個 state 裡面；第三個 state 資料放在第二個 state 裡面......

• hooks 依賴固定呼叫順序：

    因為一但有某個 hook 的呼叫在某次 render 被跳過，其後續所有的 hook 都會對不上，導致 React 內部在存取狀態資料時會『錯置』

錯置範例

• 合法讓 hooks 不運作的方法，就是 unmount 包含這些 hook 的 component

Hooks 的目標

• 配合 function component 使用
• 讓其擁有狀態
• components 邏輯重用

Hooks API 設計思維

• 定義、管理狀態、方便重用
• 避免命名衝突
• 依賴透明
• 重用邏輯可以自由拆分、組合、呼叫
• 避免污染 react element 結構，出現跟畫面無關的

💡👼 Zet: useMemo 可以拿來存函式!
useCallback 本身是一種 useMemo
就像 useState 是一種 useReducer 的限制性版本

💎 鑽石問題

• hooks 基於 key 會衝突
• hooks 基於固定呼叫順序

💡👼 Zet: 建立函式白作工的效能影響不大
雖然 useMemo 可以取代 useCallback 還能省函式，但沒差，而且 JavaScript 有記憶體回收機制，函式沒在用就會回收

const memoizedValue = useMemo(
    () => computeExtensiveValue(a, b),
    [a, b]
)

如果傳給 useMemo，第一個參數

() => computeExtensiveValue(a, b) 

每次都會建立一個函式再傳給 useMemo，比較後發現相同就不會建立函式