第 4 組讀書會 5-1~5-3

[Master369963]

日期: 2025/5/13
導讀人: Tay
筆記工: 99
簡報

5-1 React 中的副作用處理：effect 初探

1. 什麼是副作用？為什麼我們需要透過 useEffect 在 React component function 中處理副作用？

當執行的函式除了回傳值外，還有其他影響外部的系統或互動時，就為有副作用的行為。在React中，希望元件render的過程為pure function沒有額外影響，以確保每次render的結果都相同及減少效能問題，因此副作用會使用useEffect處理，讓 render 過程保持純粹、可預測。

2. useEffect 處理副作用的三大步驟？

a. 定義 effect 函式來執行副作用行為
b. 加上 cleanup function ，用於清理或取消之前的副作用，如取消訂閱（optional）
c. 指定dependency array，控制何時重新執行 effect，以避免不必要的重複執行，優化效能

3. 『每次 render 都有其版本的 effect 與 cleanup 函式』是什麼意思？

每次 component render 時，useEffect 會建立一個新的 effect 函式與對應的變數閉包（closure）。因此，每一版 render 的 effect 和 cleanup 都是根據當下的 state 和 props 生成的獨立版本。這種設計可以確保副作用的邏輯與當前的 UI 狀態一致，也避免舊資料影響新的 render。

5-2 useEffect 其實不是 function component 的生命週期 API

1. useEffect 是 function component 的生命週期 API 嗎？為什麼？

不是傳統生命週期API，是宣告式副作用管理機制。
useEffect用途是「將原始資料同步到畫面以外的副作用處理上」。

2. 為什麼 React 要以 useEffect 的資料流同步化來取代生命週期 API？

原本的生命週期有mount, dismount等等，容易造成副作用邏輯分散在多個地方、且耦合緊密。
使用useEffect讓副作用和資料綁在一起，可以避免過於複雜的設定。

3. useEffect 的 dependencies 機制的設計目的與用途是什麼？

讓React知道此副作用是依賴於哪些資料，並在 render 後進行比對，只有當依賴資料改變時才執行副作用。這是資料導向的執行條件控制，本質是效能優化而非邏輯控制。

4. 可以用 depencies 來模擬 function component 生命週期 API 的效果嗎？

不行，需要確實填寫副作用依賴的資料。不誠實的 dependencies 會導致錯誤邏輯、bug 難查且破壞預期行為。

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

1. 如果欺騙 useEffect 的 dependencies 會造成什麼問題？

React 無法正確追蹤哪些資料變化應該重新執行副作用，這會導致副作用邏輯在錯誤的時間執行，造成資料不同步、bug 難以重現或效能問題，進而產生不可預期的錯誤。

2. 我們如何讓函式參與到 component 的資料流連動當中？

可以用useCallback記住函式，讓它的依賴資料變動時重新建立。這樣可以讓函式隨著資料變化而更新，成為資料流的一部分。

3. 希望控制副作用處理邏輯在特定時機或條件下才執行時，應該如何做到？

應正確填寫useEffect 的 dependencies，若希望副作用只在特定條件下觸發，可以在 effect 函式內部加入條件判斷邏輯