第一組讀書會 2-8 ~ 2-9

[Yo0GuitarIT]

《React 進化思維》2-8 ~ 2-9 W4 讀書會討論筆記

• 連結：https://hackmd.io/@stevenchang421/B1QCgIUk0
• 導讀人：Steven
• 筆記工：Yo0

---

Main QA:

2-8 React 畫面更新的發動機：state 初探

1. React 的 state 的本質是什麼？State 在 React 的畫面管理機制中扮演了什麼角色？

被用來儲存臨時資料用來更新畫面，能被作用是在Component裡面。State 作為啟動更新畫面的起始點。

2. State 與 component 的關係是什麼？

使用 state 來作為 Component 存取資料的Hook。

3. 為什麼 useState 的回傳值會是一個陣列？

更方便將回傳的「該次Render 的當前狀態」和「更新狀態值 useState 的方法」賦值到自定義的變數上。使用回傳物件的形式處理，增加開發複雜性。

4. React 是如何辨認並區分同一個 component 中的多個 state 的？

依據固定的呼叫順序，React 內部的機制是有序列表，依據固定順序存取 state。

5. 同一個 component 在多個地方被呼叫，它們之間的 state 資料會互通嗎？為什麼？

同一個 Componment 被重複多次呼叫的情況下，創建了不同的獨立實例，其彼此內部 state 資料是獨立不互通。

---

2-9 React 畫面更新的流程機制：reconciliation

1. 什麼是 render phase 以及 commit phase？

• render phase : 執行 component function，依據 props 和 states 等資料，產生 React Element，並提交給 commit phase。
• commit phase : 收到 render phase 後，將 React Element 提交處理到實際的瀏覽器的 DOM。

2. 解釋 React 更新畫面的 reconciliation 流程

• 1. 呼叫setState時，React 會以Object.is()檢查新舊State是否相同。
  • 新舊一致，中斷後續 reconciliation。
  • 前後不同，觸發re-render。
• 2. re-render 機制啟動時，更新 state 資料並執行 component function，產生新的 React Element。
• 3. 比較新舊 React Element，透過 diffing 演算法比較樹狀結內容。
• 4. 依據差異更新實際的 DOM。

3. 一個 component 有哪些可能會被觸發 re-render 的情形？

• Component 中定義的 state 被 useState呼叫使用時。
• 父 component 發生 re-render 時，身為子 component 的自己也會連帶被re-render。

Other QA:

1. 一個component可能被觸發re-render的情形

1. Component 中定義的 state 被 useState呼叫使用時。
2. 父 component 發生 re-render 時，身為子 component 的自己也會連帶被re-render。
3. 使用useContext的 component, 當某個 context provider 的值進行更新的時候，連帶更新所有使用該useContext 的地方。

2.Object.is() 是一個檢查機制

呼叫setState若沒有透過Object.is()檢查 state 的情況下，會一律 re-render 畫面，即便前後 state 一致。
Object.is()如果拿掉，不影響畫面的渲染正確性，只是會多 render 一次。

3. 關於 Diffing 演算法作用的時間

在Render phase的階段，用Diffing演算法找到差異之處,再將差異的地方提交給Commit phase。

4. Re-render 的機制討論

延伸第一的想法，即使父 Component 沒有傳遞 Props 給子 Component，一旦父 Component 的 state 更新了，子 Component 的內容一律會 re-render。
除非今天有刻意使用React.memo去包覆子 Component ，以 props 決定是否需要 re-render。