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

[hsuifang]

簡報
主講人：Kai
筆記工：Evonne

Content

4-1 Component的生命週期
4-2 Function component 與 class component的關鍵區別
4-3 每次render都有自己的props、state 與event handle的函式

4-1 Component的生命週期

Review

1. Component function:
   component function是一個描述特徵流程與行為的藍圖，透過這個藍圖，則React可以產生一個實際的實例。那每ㄧ個實例都是獨立存在的，並不互相影響。
2. Render phase
   Render phase 代表產生React Element 的階段
   無論是首次 render 或者是re-render都會產生新的React Element
   透過diffing 演算法找出差異提交給 commit phase
3. Commit phase
   將差異之處轉換成實際的DOM element，透過Web API更新DOM
4. React 中觸發 reconciliation 的唯一手段是 setState (P.170)

Mount 、Update、Unmount

「 component 生命週期」
「一個 component instance 的生命週期」P240

圖片來源： Kai 簡報第六頁

生命週期相關圖： React Hook Flow Diagram

Function component 沒有提供生命週期 API

class component 有提供生命週期 API，但function component沒有。
他僅有提供生命週期的流程機制(mount、update 及unmount)用於維護與資料管理。

useEffect 不是 function component 的生命週期 API

章節檢測

解釋 component 中的三大生命週期的運作流程。

Mount - 新畫面區塊產生

function component 進行首次的 render就會發起 mount的流程 。

從 render 至 commit 到實際DOM過程的的步驟如下：
首先以 function component 建立一個 React element，若是 React 內部不存在此節點，就會觸發 mount流程，此時內部將建立 fiber node 資料，儲存 component 實例的資料；

再來是 render phase 將執行 component function，以 props 與 state 等資料產生出React Element，接著將產出交給 commit phase；

然後 commit phase 階段，因為第一次 render，在瀏覽器實際畫面還沒有這個 component 實例對應的 DOM element，所以將會把剛剛 render phase 所產生的 React element 全部轉換並建立實際 DOM element，再透過 WEB API 的 appendChild 放置實際瀏覽器畫面；此時就可以透過 DOM 結構找到上述的 DOM element

接著執行本次render所對應的 副作用處理，也就是執行定義在 useEffect 的函式。

Update - reconciliation / re-render

一個 component 已存在，要再次渲染流程。
當呼叫 setState 觸發 reconciliation 流程，也是 React 唯一 觸發 的手段。
總共有三種情況會觸發 render：本身component呼叫 setState、 本身 component的父層呼叫 setState、useContext (有用到該 useContext 都會觸發)

觸發 render 後，接著執行 render phase ，以新版的 props 與 state 產生新的 React element
再來將新舊版本的 React element 進行比較，並將差異交付給 commit phase

那 commit phase 的階段只操作差異之處所對應的 DOM element

再來執行先前 useEffect 所產生出來的 cleanup function，意指清除前一次的副作用
接著再執行本次 副作用處理

Unmount

當該位置上不再出現這個畫面區塊(render 比較)，就會進入 unmount 階段。然後 React 會進行副作用清理，並將component實例所對應的實際 DOM element 移除。然後 React 內部也會清除對應的實例 - fiber node，代表這個實例的所有 state 會被清空。

Function component 有生命週期的 API 嗎？

沒有提供。 Function component 擁有mount、update、unmount生命週期流程來維護畫面與資料的管理機制，但沒有像 class component 有提供生命週期的 API 。

章節討論議題

題目：
Component unmount 時，是否還會有在 Render phase 比較出差異交給 commit phase 這段流程？

小組討論：
感覺應該要有，才會知道說這個 component 類型的 React element 應該要被 unmount

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

透過購物車範例 說明在 function component 及 class component 在非同步的差異。

在簡報P13 頁及課本 249頁說明到 class component 在 this.props 非同步事件中的存取陷阱

雖然 props 資料本身是 immutable，但 this 不是
所以每當 class component re-render 時，React 會用新的 props 覆蓋 this 中舊版的 props

解決辦法可以將特定 render 版本的 props 資料與該方法綁定在一起 (參考課本 P250)

物件導向特性

基於 mutable 的思維，
當資料狀態改變時，以類別中的方法來 mutate 實例上的屬性資料就是物件導向中一貫的作法。

但此設計模式在以 immutable 為核心概念的 React 中就顯得格外彆扭，甚至容易破壞資料流的關鍵性。

Function component 會自動「捕捉」render 時的資料

每次 render 準備發動時：

1. React 會從內部機制中的 component 實例上，捕捉一次當前版本的 props ，作為參數傳給 component function 來執行
2. state 則透過 useState 回傳，並在該 component function 中重新宣告

class component 與 function component 關鍵區別：
function component 會自動「捕捉」該次 render 版本的原始資料

章節檢測

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

class component中，雖然props是以mutable的形式，但是 this不是
所以每次在render的時候會用新的props去覆蓋this 中舊版的 props
所以在非同步操作的時候可能會發生一些問題

「function component 會自動捕捉該次 render 時的 props 與 state 資料」是什麼意思？

在每一次的render中，function component 會捕捉到當時的 props 和 state。這些資料會作為參數傳入至該 function component 的執行環境中。因此，在這個 function component 所建立的任何函式都會與當次的 render 環境共享相同的 props 和 state，這些值實際上是當次渲染的一個快照。每次渲染時，捕捉到的 props 和 state 可能會有所不同，因此這些值在每次渲染中都是獨一無二的。

clousure 特性只有在 component 的函式才會發生
本身 function component 是沒有 closure

章節討論議題

題目：以 props 傳入 component 內部的 props 與傳入的 props 是否為不同的記憶體位置

4-3 每次render都有自己的props、state 與event handle的函式

關鍵思維

React 並不會監聽資料的改變，資料改變、更新都是由開發者透過 setState 去觸發 React re-render
每一次的 re-render 或 reconciliation 都會執行 component function，而產生出新的作用域

每個 re-render 當下的 state 與 props 是當下的資料快照
Event handler 函式是以原始資料 props 與 state 快照延伸出來的另外一種資料快照的結果

Immutable 資料使得 Closure 函式變得可靠而美好

章節檢測

React 會監聽資料的改變並自動觸發舊有畫面的修改嗎？為什麼？

React 不會知道資料的改變以及監聽資料，而是透過開發者呼叫 setState 觸發畫面修改機制

為什麼每一次 render 的 props 與 state 的值都是永遠不變的？

每一次 render 的 props 與 state 都是永遠不變。因為functional component 在每一次render的時候都會有自己一個props跟state的快照，每一次的 props 及 state 間都是獨立、互不影響

總結解釋「每次 render 都有其自己版本的 props 與 state」是什麼意思？

每次當一個 component 被重新渲染時，React 就會調用該 component function，這個過程涉及到了創建一個新的執行上下文（execution context）或稱作 function scope。在這個過程中，props 是作為參數傳遞到 component function 中的，類似於在普通 JavaScript 函數中傳遞參數。這意味著，每次渲染時 props 被視作是在 function 內部的一個本地拷貝。

同時，當我們使用 useState 這類 Hook 來管理 state 時，React 會處理這些 state 的初始化和更新。從本質上看，這種操作類似於創建 state 的一個本地拷貝。因此，每次渲染時，當前的 props 和 state 都是獨立且隔離的，只存在於該次渲染的 scope 中，與其他渲染無關。

這種設計保證了每次渲染都擁有其專屬的數據環境，使得數據的管理更加清晰且容易追蹤，並且提高了應用程序的可靠性和預測性。

為什麼 component function 內所定義的 event handler 函式可以永遠記得那些存取到的 props 與 state 變數？

每當 React 的 component function 在渲染過程中被調用時，它會創建一個新的 function scope。在這個過程中，當前的 props 和 state 被傳入這個 function，並作為本地變數存在。這些 props 和 state 的當前值會在該次渲染的環境中被快照（snapshot），從而被保存在該渲染 scope 內。

當在 component function 內定義一個 event handler時，如果這個 handler 使用了 props 或 state，這些值會因為 JavaScript 的 closure 特性被 event handler 「記住」。Closure 讓這個 function 能夠存取它被創建時的 lexical environment，包括那時的 props 和 state，即使這個 event handler 在未來被異步觸發。

因此，即使 component 重新渲染並產生了新的 props 和 state，event handler 仍然「記得」並存取到它被創建時的那個版本的 props 和 state。這是因為這些變數被捕捉在 event handler 的 closure 中，使其可以持續訪問當時的數據，無論外部狀態如何改變。

component function 內所定義的 event handler 函式，在每次 render 之間是同一個函式個體嗎？為什麼？

不是。每個 re-render 當下的 state 與 props 是當下的資料快照
Event handler 函式是以原始資料 props 與 state 快照延伸出來的另外一種資料快照的結果

可以透過影格的概念去理解

總結解釋「每次 render 都有其自己版本的 event handler function 」是什麼意思？

「每次 render 都有其自己版本的 event handler function」這表示在 React 中，每當一個 component 進行渲染時，如果在該 component 內部定義了事件處理器（如點擊或滾動事件的處理函數），這些事件處理器將會在每次渲染時重新創建。這種行為是因為事件處理函數通常直接在 component function 的內部定義，而 component function 每次被調用時都會重新執行其內部的程式碼

為什麼 immutable 資料以及 closure 是讓 component 裡的 function 也變成單向資料流的一部份的重要關鍵？

在React中，採用immutable資料與利用closure特性是實現單向資料流的關鍵。Immutable資料確保一旦資料創建後不被修改，使得資料變更容易預測，並優化渲染性能。
Closure則允許函數記住其創建時的作用域中的變數，即使是在外部作用域已結束後，確保了資料的一致性和獨立性。
這些特性共同促進React的單向資料流，保證資料從上層向下流動，進而提高資料可靠性和可維護性。