第二組讀書會 5-3

[HLTVProxy]

《React 思維進化》讀書會第二組 5-3

簡報

5-3 維護資料流的流動:不要欺騙 hooks 的 dependencies

概念回顧

1. useEffect(effectFunction, dependencies?):
   a. 宣告式同步化
2. batch update
3. updater functioin

欺騙 Dependencies 會造成什麼問題?

讓 effect 函式對於依賴的資料自給自足

利用前面概念回顧的 updater function 來呼叫 setCount, 用既有的值做計算，就不用依賴 state: count 變數去做更新，可以使用相同的 setInterval 去執行需要的動作，並做到資料解耦。

1. 欺騙 dependencies
2. 誠實填寫 dependencies
3. 在 effect 函式使用 updater function

函式型別的依賴

常見問題: 函式寫在 dependencies 的問題，會因為每次 re-render 都建立了一個新的函式。但若避寫了函式在 dependencies 去欺騙 React, 很可能會造成非預期性的錯誤

1. 將函式寫在 useEffect 中
2. 將函式寫在 component 之外
3. 使用 useCallback

以 linter 來輔助填寫 dependencies

eslint-plugin-react-hooks
React 官方有提供 ESLint 插件
在 Create React App 和 Next.js 中有內建此插件
如果使用 VS Code，需安裝「ESLint」擴充功能，才會正常顯示

Effect dependencies 常見的錯誤用法

1. 在 function component 中模擬 ComponentDidMont 方法
   撰寫空陣列，讓 Component 只在做初次渲染時執行 effect 函式，欺騙 dependencies 來控制 effect 函式執行時機

解決方法: 若只想執行一次副作用函式，可以改以條件式判斷 + useRef 來控制商業邏輯的執行時機。

2. 以 dependenies 來判斷副作用處理在特定資料發生更新時的執行時機

QA

• 如果是 vue 就不需要自己填入 dependencies 這些東西，也減少心智負擔；那為什麼 React 會要讓我們自己手動去寫 dependencies?
  • Vue 和 React 目標都是單向資料流，但採用的方法完全相反
  • Vue 用加法，預設什麼都不做，需要的時候才去做
    • 因為 Vue 把監聽器綁在資料上，所以都要用 mutate 的方式去做，Vue 的監聽才會知道資料有變，監聽資料有變化，對應畫面才會有變化 -> 加法
    • Vue 不需要 dependencies，因為 Vue 本來就會監聽資料，他知道要做哪些對應的事情
  • React 用減法，預設每次都做，每次都要重產畫面、每次都重執行副作用；資料有沒有變不知道，反正先做再說，先重畫畫面再說
    • setState 後的 Object.is 比較只是防呆機制，就算拿掉Object.is，整個運作還是不會壞掉
    • React 做的是依賴逆向推導: 透過前後來源資料的比對，才知道需不需要重做、才知道能不能跳過
      • 所以要告訴 React 你用了哪些原始資料，他才能去比對並做逆向推導
• useEffect 在 deps 可跳過時還是有被執行到，只是最後沒有執行 effect 函式
• useCallback 不會避免 fn 被建立，fn 參數傳入的函式建立後，才會傳給 useCallback
  • useCallback 本身無法帶來效能優化，是要讓函式能正確反映資料是否變化
  • useCallback 都會產生新函式，只是會根據依賴值決定回傳前一次的還是新的
• React18 嚴格模式/開發環境執行兩次 effect，不是 re-render，而是 mount => unmount => mount
  • 參考章節 5-4