第三組讀書會 5-3

[itzuchen1215]

《React 思維進化》5-3 讀書會筆記

• 簡報連結：https://hackmd.io/@8VJraqHuQlikeGpnJTvwMQ/Bk1U8q3NC
• 導讀人：Jan
• 筆記工：Isla

自我檢測討論

Q1: useEffect 的 dependencies 有三種寫法，分別代表什麼意思？

1. 沒有填寫是預設狀態，每次 render 都會執行

useEffect(setup)

3. 空的是只會 mount 執行一次

useEffect(setup, [])

5. 如果有填寫會依賴值，有改變才會執行，沒改變就會跳過

useEffect(setup, [stateA, propsA])

• ZET補充：
  • dependencies 精確來說只有兩種寫法，有跟沒有的差別而已
    • 空陣列不是特例，他就是其中一種 dependencies，只是代表沒有依賴的值，而且無法保證是否會在未來的 React 版本是否會正常(5-4會講到)
    • 不管有沒有寫 dependencies，mount 就是會執行一次
    • 如果有寫 dependencies，他會去比較上一次依賴的原始資料，如果沒有變，就會跳過這次的執行

Q2: 當被通知到需要 render 到 useEffect 中間發生了哪些事？

keyword: useLayoutEffect, useEffect, cleanup

Q3: 如果欺騙了 useEffect 的 dependencies 會有哪些問題?

通常會導致我們的應用程式出現一些難以察覺與追蹤的 bug，因為這會導致 component 錯誤的忽略某些依賴的原始資料變化時，應該要連動的同步動作。

書上也有說明到欺騙 dependencies 可能使副作用再某些明明有依賴到的資料發生更新時，卻錯誤的跳過了應該要連動執行的同步化動作

Q4: 聽完今天的導讀，你會更改原本的寫法嗎？還是會照舊？

• A 同學：
  原本是寫vue，一開始把useEffect當成vue watch來用，但讀完這本書後，會依照react的設計模式來實作
• B 同學：
  像todos那個範例，之前也這樣用過，但讀完這個章節會意識到要照著設計規範走，之後會改正
• C 同學：
  讀完5-1~5-3，一開始都會把他當成watch，把他當成監聽使用，但有意識到dependencies主要的目的是效能優化，理論上不使用dependencies你的邏輯也不能壞掉，之後在使用上都會抱著這個概念去設計
  • ZET 補充： 對，效能優化的概念就是把他抽掉時主邏輯還是不能壞掉，還是建議大家都要對 dependecies 誠實，而且 React 是沒有監聽的概念的
    • 減法(React)：我一律重繪，去比較前後次render的值，如果是一致，我就可以跳過一些render
    • 加法(Vue)：我先監聽有哪些東西再決定哪些東西要render

其他討論

Q. 請問剛剛那個useEffect順序 相反的話會有差嗎？如果dependents 依賴項是同一個的話

A. 會有差，如果你是要問兩個 useEffect 都是依賴於同一個物件，那執行順序就很重要，不過這也要看你的商業邏輯是如何運行

補充

ZET 大大統整的 mental model 重點

• React 的模型是每次 render 一律重做所有事情，沒有監聽的概念
• 透過減法來做效能優化，如果原始資料在兩次 render之間相同，那就可以跳過某些處理來節省效能
• useEffect 的 deps 是效能優化，如果依賴的原始資料在兩次 render 沒有不同，就代表可以安全地跳過該次的副作用處理

React 官方文件連結

useEffect
useRef
useCallback