第二組讀書會 5-1~5-2

[MiJouHsieh]

《React 思維進化》讀書會第二組 5-1~5-2

20240529 5-1~5-2

導讀人：Cheryl
筆記工：Mi

簡報

---

補充資料

1. class component生命週期API
   Youtube:
   React Component Lifecycle - Hooks / Methods Explained
   可以記以下4個方法
   constructor
   componentDidMount
   componentWillUpdate
   componentWillUnmount

2. dependencies 能不能放 Object?
   React官網:
   Removing unnecessary object dependencies

   const serverUrl = 'https://localhost:1234';
   
   function ChatRoom({ roomId }) {
     const [message, setMessage] = useState('');
   
     const options = { // 🚩 This object is created from scratch on every re-render
       serverUrl: serverUrl,
       roomId: roomId
     };
   
     useEffect(() => {
       const connection = createConnection(options); // It's used inside the Effect
       connection.connect();
       return () => connection.disconnect();
     }, [options]); // 🚩 As a result, these dependencies are always different on a re-render
     // ...
   

   問題情境:

   在元件中定義 options object ，且effect函式依賴options object ，所以dependencies中寫入options。

   但在每次元件渲染時會重新建立object ，dependencies判斷和上次render時的object 不一樣，就會執行副作用處理。
   ⇒ dependencies 效能優化失效

   修改:

   避免使用每次render而產生的object作為依賴資料。

   將 options 放入 effect函式中定義，將 options object 中的 roomId，以roomId值的原始型別作為依賴資料去判斷資料有無更新，才執行副作用處理。

3. 有依賴項存在，又不想多次執行effect函式時，不欺騙dependencies的作法:

   • 以條件判斷決定 effect 函式執行的時機。(其中一種方法)

---

觀念自我檢測

5-1

(1) 什麼是副作用? 為什麼需要透過 useEffect在React component function中處理副作用?

• 指函式會依賴或影響函式外部環境的系統狀態或變數，稱此函式是有副作用的。
• useEffect處理副作用解決2個問題:
  • 定義cleanup函式⇒清除或逆轉前一次render造成的副作用影響，避免副作用疊加，結果難以預測。
  • 副作用隔離至render後，避免render期間等待副作用執行時間，導致畫面更新效能問題。

(2)以useEffect處理一段副作用的三大步驟是什麼?

• 定義effect函式，即副作用處理邏輯。元件render後會預設執行一次。
• 定義cleanup函式在effect函式中，若有需要清除副作用影響的話。
• 指定effect函式的依賴陣列，為可選擇填寫。
  • 沒寫的話，維持useEffect預設行為。
  • 寫入空陣列，表示effect函式沒依賴資料。
  • 寫入資料，若判斷與前一次版本相同，可跳過不必要的副作用處理。

(3) 解釋每次render都有其自己版本的effect與cleanup函式是什麼意思?

每次render都會產生新的 effect函式、cleanup函式，且該次render的元件資料(props、state)是固定不變的快照值。

effect函式和cleanup函式因 JavaScript closure特性，可讀取該次render的元件資料。

所以不同次render的元件資料，為獨立不互相影響。

比如，當要執行cleanup函式時，會讀取到前一次render的快照資料，也就是每次render都有其自己版本的effect與cleanup函式。

(4)一次render中的effect函式與cleanup函式會在什麼時間點被執行?

搭配元件實例的生命周期三階段

1. mount階段-render完後， 執行effect函式
2. update階段-re-render完後， 先執行前一次render的cleanup函式再執行該次effect函式
3. unmount階段-移除DOM element後，執行最後一次render的cleanup函式。

5-2

(5)useEffect是 function component 生命週期API嗎?為什麼?

不是。

useEffect 不論執行多少次，讓資料流和程式邏輯保持同步化到副作用處理是正確的結果即可。而不是像生命週期API關注函式的執行時機和次數。

(6)為什麼React要以useEffect的資料流同步化這種設計來取代生命週期API?

因為在class component生命週期API中，有以下缺點:

1. 邏輯分散-開發者要在三個階段分別處理情境，才能完成同步化的效果。維護成本高。
2. 副作用處理流程很難重複使用。
3. 很難將副作用整合在一起。
4. 指令式程式設計在乎過程中函式的執行時機和次數

在function component 中止需要一個useEffect方法，使維護成本下降。
宣告式程式設計，不在乎過程中函式的執行時機和次數，只要預期結果正確即可。

(7) useEffect的dependencies機制設計目的與用途是什麼?

目的: 效能優化

dependencies陣列中的資料，以Object.is 方法判斷與前一次render的版本的值比較，若相同就可以避免不必要的副作用處理。若不相同就執行副作用處理。

(8) 可以用dependencies參數模擬 function component 生命週期API的效果嗎?

不行。

因為 dependencies 用途也不是用來模擬生命週期: 在特定時機執行函式和次數。
dependencies 是以依賴項的值有無改變，避免不必要副作用處理，是一種效能優化手段，一種"有也很好，但沒有也不會怎麼樣"的優化方式。

要根據實際effect函式有無依賴資料誠實填寫dependencies。
即使資料沒更新，而跳過副作用處理，都不是一定保證的。
若欺騙dependencies來模擬 function component 生命週期API的效果，可能會使程式碼有危害。

---

問題討論和其他補充

Q1: render之後才執行 effect函式，後端來的資料是在什麼時候取得嗎?

A:

• 第一次render時不會抓到資料，第二次render時才會抓到
  useEffect 在元件首次渲染後執行。因此，第一次渲染時，元件內部的狀態資料通常是初始值（例如，null 或空陣列）。這時候，useEffect 會被呼叫來發送 API 請求，然後等待後端返回數據。當數據到達時，狀態會更新，這會觸發元件的重新渲染。所以，在第二次渲染時，元件就能正確顯示來自後端的數據。
• 打API時較少用useEffect，較多使用第三方套件，比如TanStack Query (舊名 react-query)、Apollo Client ，簡化 API 請求的處理。使用套件當資料還在加載中時，顯示 loading 的畫面，等到資料加載完成後再顯示內容。

Q2: 有沒有辦法知道 useEffect 在 component render 後是哪些依賴項觸發了 useEffect 的執行？

A: React 並沒有內建的功能來直接告知究竟是哪個依賴項發生了變化而觸發 useEffect。

• Git 圖形用戶界面 (GUI) 工具，進行版本控制操作。

  • Fork https://git-fork.com/
  • SourceTree
  • GitKraken

• Warp Terminal 終端應用程序，具有AI 功能，可以查詢指令。

• git 練習資源 https://learngitbranching.js.org/?locale=zh_TW