第 4 組讀書會 5-4~5-7

[webdevbyjasmine]

5-4-5-7

日期：2025/6/3
導讀人：Stella
筆記工：Jasmine

簡報

5-4為什麼在 react18 的嚴格模式會在 mount 時自動被執行兩次？(嚴格副作用模式)

因為嚴格模式的功能，啟動嚴格模式＋開發環境版本下才會如此。

偵測不安全的副作用（side effects）

React 想幫你確認某些副作用函式（例如：useEffect、useState 的初始行為、訂閱事件等等）在多次執行後仍是安全、可重複執行的。

例如你在 useEffect 裡訂閱了一個事件，但沒有妥善清除（cleanup），那就會導致記憶體洩漏或重複綁定。

提升函式元件的可重用性（Reusable State）

為了支援未來像是「自動快取」或「並行模式（Concurrent Mode）」等功能，React 需要確保元件副作用是可預測與無副作用污染的。

所以會模擬「重複初始化與卸載」來檢查程式碼是否穩定。

Reusable state是什麼?為了滿足 reusable state 對於程式碼彈 性的要求，我們應該要讓副作用的設計滿足什麼目標?

🔸 React 可以暫時「卸載」元件，保留它的狀態（state），然後在需要時再「重新掛載」這個元件，而不會重置其狀態或破壞其邏輯。

✅ 設計目標：

1. Effect 可以重複執行而不出錯（idempotent）
   • 副作用多次執行不會產生重複綁定、重複請求或記憶體洩漏。
2. Effect 有正確的 cleanup 清除機制
   • 每次執行 effect 前，React 都會先執行上一次的 cleanup。
   • 所以你要確保有正確清除事件、定時器、訂閱等等。
3. 避免放入不必要的 dependency
   • useEffect 的 dependency array 裡不要放與副作用無關的東西，避免因為不必要的 re-render 重新執行 effect。
4. 不要讓副作用依賴變動的 DOM 或狀態除非你能保證同步
   • 比如不要在 effect 裡直接操作 DOM 元素或非同步依賴狀態變化，除非有 guard 條件或正確順序保證。

5-5 副作用處理情境設計技巧

我們要如何解決副作用設計中「疊加性質而非覆蓋性質的操作」的問題?

要設計一個 cleanup 函式，疊加性質：指本身的副作用，比如說同樣的變數取代前一個（可覆蓋掉）就不算是疊加，如果是導讀人舉例的SetTimeout會疊加（會一直存在），導致產生memory leak

我們如何解決副作用設計中「race condition」的問題?

利用 cleanup function 設立 flag 避免 race condition

這是一種常見又實用的寫法，基本邏輯如下：

1. 每次 useEffect 執行時建立一個「是否已取消」的 flag。
2. 在 cleanup function 裡把這個 flag 設成 true。
3. 在非同步任務完成時檢查這個 flag，若已取消就不再進行後續狀態更新。

這樣可以避免「上一個請求回來時覆蓋了新的狀態」的狀況。

📘 書中提到的第三方套件（例如 React Query）

有時候處理非同步請求與快取等細節太麻煩，也可以考慮使用現成的套件來處理，例如：

• React Query（現改名為 TanStack Query）
• SWR（由 Vercel 團隊維護）
  
  

5-6useCallback & useMemo 使用的正確時機

useCallback記憶傳入的函式參考，只有在 dependencies 改變時才會回傳新的函式

它本身不會帶來效能優化，而是搭配其他效能優化工具（例如 memo）一起使用時才會有效果

✅ 使用方式與重點說明整理

重點	說明
調用位置	必須在Component 頂層呼叫（符合 Hooks 規則）
第一個參數	要記憶的「函式」
第二個參數	dependencies 陣列（選填，但實務上幾乎必填）
回傳內容	回傳記憶過的函式，如果 dependencies 沒變，會回傳同一個函式引用
功能說明	防止函式在每次 render 時都重新建立
搭配工具	通常搭配 React.memo, useEffect, useMemo 使用
與資料流關係	當函式依賴 props/state 資料時，可以用 useCallback 控制它們的「改變時機」

useCallback 雖然看似簡單，但其實牽涉到元件資料變動與渲染效能的議題，使用上要依照實際需求來判斷是否有必要使用。過度使用反而會讓程式碼更複雜，沒有真正的效能提升。

useCallback 正確的用途以及適當的使用時機是什麼?

如果依賴項是函數的話**useCallback連動的副作用 讓useMemo &useEffect有依賴項變動才會變動**

正確的用途是「讓我們的函式能夠反應資料流的變化」

• 依賴項（dependencies）沒有更新時，讓相同的函式参考可以披重複使用。
  •傳透給子 component或效能優化的情境，特別搭配 memo使用時，可避免不必要的 re-rendero
  •搭配 useEffect 的 dependencies 列中，也能確保不會因為函式參考婆動導致副作用重複執行

useMemo 正確的用途以及適當的使用時機是什麼?

正確用途：

• 複雜的數據轉換或處理 (例如：對大型陣列進行排序、篩選或映射)
• 需要遞歸或大量迭代的計算(當 object, array 需要被 cache 的時候
• 任何可能導致應用程式效能瓶頸的計算及耗成本中達到平衡
• useCallback 本身是一種 useMemo

5-7Hooks 的運作原理和設計思維

Hooks 資料放哪裡？	放在 Fiber Node 裡，以 linked list 結構存在。

為何要固定呼叫順序？	因為資料是按順序讀取，若順序不一致會造成錯誤。

怎麼避免命名衝突？	不靠命名找資料，用順序呼叫方式來避免「鑽石問題」。

Zet Ｑ＆Ａ

1. 看到一個語言或框架時，應該思考它背後是如何實作出這些功能的原理。

2. 在自己實作功能的時候，也要試著去思考，有沒有更好的實現方式。就算當下時間不夠，也可以先把新的想法或做法記錄下來，起碼有想過，或是日後再深入研究。

3. 在進行 Code Review 前，應該先自己思考、嘗試解決問題，再去尋求他人的建議或答案。