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

[TayCheng091]

日期：2025/4/29
導讀人：Blue
筆記工：Tay
分享連結

回顧

3-3

維持 React 資料留可靠性的關鍵：Immutable state

• 什麼是 Mutate
• 保持 state 的 immutate

3-4

Immutable update

• 物件資料的 immutable update 方法
• 陣列資料的 immutable update 方法
• 巢狀式參考型別的複製誤解

本期內容

4-1-1 Component的三大生命週期

1. Mount

   定義：

   當 component 以 React element 形式在畫面中首次出現

   流程如下：

   1. 以 component function 建立 React Element （EX: ）：
      內部建立 Fiber node 資料，存放 component 實力的各種資料
   2. Render phase：
      以 props 與 state 等資料來產生初始畫面的 React element
   3. Commit phase：
      將 render phase 產生的 React element 轉換成 DOM element 並透過 appendChild() 放到瀏覽器上
   4. 執行副作用：
      component 中以 useEffect 定義的函式（第五章介紹）

2. Update

   定義：
   當 component 存在畫面中，且再次進行渲染的流程（re-render / reconciliation）

   setState 是唯一的觸發方式，通常會有以下兩種情境導致 re-render

   1. component 本身定義的 state 發起對應的 setState 方法的呼叫
   2. 父或祖父輩 component 因為 setState 呼叫出發 re-render，導致子 component 也跟著 re-render

   流程如下：

   1. 再次執行 component function，重新產生新的 React element：
      以新版本 props 與 state 等資料，產生新的 React element，新舊版 React element 進行樹狀結構的比較，並將差異處送至 commit phase 繼續處理
   2. Commit phase：
      只更新 React element 差異處所對應的 DOM element
   3. 清除前次 render 時所造成的副作用影響：
      React 會先清除上一次 render 所建立的副作用，EX：event listener、取消訂閱
   4. 執行本次 render 所對應的副作用處理：
      再根據這次新的 render，建立新的副作用 (useEffect)

   副作用範例 - 課程存取票證刷新

   • 每一門課（course）都有一個 課程存取票證
   • 課程存取票證需要每 5 分鐘刷新一次，保證它是有效的
   • 如果使用者切換了課程（courseId 改變），就要清掉舊的 timer，換新的 timer
   • 避免：
     • 舊 timer 還在跑，造成浪費或錯誤
     • 多個 timer 疊在一起

   function CourseSignedCookieRefresher({ courseId }) {
     useEffect(() => {
       if (!courseId) return;
   
       const refreshSignedCookie = () => {
         console.log("刷新 courseId=" + courseId + " 的 signed-cookie");
         // 實際的 API 請求可以放這裡
       };
   
       refreshSignedCookie(); // 一進來就先刷新一次
   
       const timer = setInterval(() => {
         refreshSignedCookie();
       }, 5 * 60 * 1000); // 5分鐘
   
       return () => {
         clearInterval(timer);
         console.log("清除 courseId=" + courseId + " 的 timer");
       };
     }, [courseId]);
   
     return null;
   }

3. UnMount

   定義：
   當 React element 在 re-render 後的結構不再出現時，則 component 實例將進入 unmount 階段

   流程如下：

   1. 對比新的畫面結構，若有某 component 類型的 React element 消失了，則 React 認為該處的 component 實例該被 unmount
   2. 執行 cleanup 函式：
      執行 component 最後一次副作用處理所對應的 cleanup 函式
   3. 移除瀏覽器元素：
      將對應的 DOM element 移除
   4. 移除資料：
      React 會在內部移除對應 component 實例，也就是 fiber node，意謂 component 實例內所有狀態資料都被丟棄

4-1-2 Function component 沒有提供生命週期 API

useEffect hook 的用途並非提供一個特定生命週期來執行的一種 callback 函式。

4-2 Function component 與 class component 的關鍵區別

進化史

Class Component → Hook 問世（2018）→ Function component（主流）

Class component 在某些情境下容易不如預期

Demo網址： https://codesandbox.io/p/sandbox/3jy2t5

關鍵差異 - this.props 的存取陷阱：

雖然 props 是 immutable ，但 this 不是。

當 re-render時，會將新版的 props 以 mutate 的方式覆蓋 this 中取代舊版 props 物件

export default function BuyProductButtonFunction(props) {
  const showSuccessAlert = () => {
    // 會拿到點擊當下的數值
    alert(`購買商品「${props.productName}」成功！`); 
  };

  const handleClick = () => {
    setTimeout(showSuccessAlert, 3000);
  };

  return (
    <button onClick={handleClick}>購買</button>
  );
}

-----

import React from 'react';

export default class BuyProductButtonClass extends React.Component {
  showSuccessAlert = () => {
    // 會拿到最新的數值，因有三秒空檔，當中有人亂換 product 可能就會錯亂
    alert(`購買商品「${this.props.productName}」成功！`); 
  };

  handleClick = () => {
    setTimeout(this.showSuccessAlert, 3000);
  };
  
  render() {
    return <button onClick={this.handleClick}>購買</button>
  }
}

如何修正（class component）

讓非同步事件的 props 讀取與 this 脫鉤，讓後續的 this.props 不影響早已「捕捉」好的舊資料

import React from "react";

export default class BuyProductButtonClass extends React.Component {
  showSuccessAlert = (productName) => {
    alert(`購買商品「${productName}」成功！`);
  };

  handleClick = () => {
    // 先把 productName 拿出來，就不會受後續影響
    const { productName } = this.props;
    setTimeout(() => this.showSuccessAlert(productName), 3000);
  };

  render() {
    return <button onClick={this.handleClick}>購買</button>;
  }
}

Function component 呢？

props 以參數傳入，每次準備 render 時都先捕捉當前 props 傳入 Function component 所以沒問題

4-3-1 每次 render 都有自己的 props、state

常見誤區 - React會觀察 state 並自動更新

state 本質上並非 「watcher」、「proxy」等帶有監聽性質的東西，就是一個普通變數

• React 不會監聽資料變化 ( 需呼叫 setState 觸發 )
• React 不在乎新舊資料差異，只會以 Object.is 方法簡單比較，決定是否觸發 re-render
• 每次 render 做的事就是以當下 props 和 state 重新執行一次 component function
• 每次 render 都會捕捉屬於自己版本的 props 和 state 當作快照，這個值是個只存在該次 render 的常數，其內容永遠不會改變

4-3-2 每次 render 都有自己的 event handler 函式

因為一次 render 產生的 event handler 函式所讀取到的 props 和 state 資料固定不變，

因此，每次 component render 對會產生自己版本的 event handler 函式，對應存取到其自己版本的 props 與 state

這也是為什麼 props 不可修改。當資料是 immutable 時才能維持每次 render 資料獨立，確保資料的可靠性。

4-3-3 Immutable 資料使 closure 函式變得更可靠

因為 this 並不是一種保證 immutable 的固定資料，很難確保函式執行結果是固定的

Function component 因每次 render 內的各種函式中以 closure 記住並依賴 immutable 的 props 和 state，讓函式執行效果變穩定、可預期的 ，也使 component 裡的函式成為單向資料流的一部分

「當原始資料改變，函式執行的效果才會連帶發生變化」

immutable 這件事需要開發者人為維護的，不當操作可能導致 immutable 被破壞 ( [上週的筆記](#51) )

QA

4-1-1 & 4-1-2

Q1：mount 觸發時機＆機制？

A1：當一個 component 以 React element 形式在畫面中首次出現

• 建立 Fiber node (紀錄狀態、資料)
• Render phase
• Commit phase

Q2：update 觸發時機＆機制？

A2：當一個 component 存在畫面中，且再次執行換染的流程

• 比對新舊資料
• 更新局部要修改得DOM
• 清除前一次 render 副作用影響
• 執行本次副作用

Q3：unmount 觸發時機＆機制？
A3：當 React element 在 re-rerender 後的結構中不再出現時，則 component 實例將進入 unmount

• 比對新舊資料
• 執行 component 最後一次副作用處理所對應的 cleanup 函式
• 將對應的 DOM element 移除
• React 會在內部移除對應的 component 實例

4-2

Q4：class component 中的非同步事件以 this.props 存取 props 可能會有什麼問題？

A4：讀取到最新的 props 而非預期的舊資料

Q5：function component 中的非同步事件中有「function component 會自動捕捉當前 render 時的 props 和 state 資料 」是什麼意思？

A5：由於 closrue 特性，event handler 建立時會綁定當次 props 和 state 資料

4-3

Q6：React 會監聽資料並自動觸發舊有資料的修改嗎？

A6：不會。以 setState 觸發，並用 Object.is 判斷是否要 re-render

Q7：component function 內所定義的 event handle 函式，在每次 render 之間是同一個函式個體嗎？

A7：不是，每次 component render 時都會產生其版本的 event handler 函式，對應其版本的 props & state