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

[708kelly]

畫面更新的發動機：state & 畫面更新的流程機制：reconciliation

簡報： https://react-book-slide.vercel.app/1
時間：2024/04/03
導讀人： Monica
筆記工： 1t

導讀討論

• fragment 除了可以放 key，也可以放 children

  <Fragment children={$SomeComponent}/>

  ref: https://react.dev/reference/react/Fragment

觀念自我檢查

React state 的本質是什麼? state 在 React 的畫面管理機制扮演什麼角色?

小白: 暫存記憶體，用 `useState` 來使用，比較值是否有差異，有差異就會觸發重新 render

State 與 component 的關係是什麼?

robert: state 作為 component 可更新的資料 （也作為一率重新繪製的界線），只要 state 更新 component 就會重新觸發

為什麼`useState`的回傳值是一個陣列?

cheryl: 回傳兩個資料，一個是現狀資料和設定資料的 function，用陣列的話，方便我們重新命名

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

1t: 依照 `useState` 在 component 呼叫的順序

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

var:
他們是不同的 instance，不同 instance 會有不同的資料，有兩杯珍奶，一杯半杯一杯沒動，他們是不同的狀態

什麼是 render phase 以及 commit phase?

Mi:
component 畫面管理的兩個階段

• render：component function render react element
• commit: react element render to DOM element

解釋 React 更新畫面的 reconciliation 流程

HLTVProxy:

• 初始化：render phase:
  • 建立 react element
  • 以 react element 繪製 DOM
• 重新渲染
  • 建立 react element
  • 比較差異，針對差異去對 DOM 進行調整

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

Monica:

• component 如果有定義 state，state 更新時

• 如果父 component re-render，子 component 也會跟著更新

其他討論

• 珍奶比喻很讚，大家各自喜歡的甜度和冰度是多少呢～
• component 除了書上寫的
  • component 如果有定義 state，state 更新時
  • 如果父 component re-render，子 component 也會跟著更新
  • 如果有用到 useContext 裡面的內容，當該內容直接
• Object.is() 如果拿掉，reconciliation 的畫面會有變化嗎
  • 不會，只是會多做一次 component 生成
• 解釋 setState 後到畫面更新，解釋一下中間發生的流程
  • reconciliation 的流程
  • 可以提到 virtual DOM
• 建議：自我檢視題可以用自問自答的方式練習口語表達和加強記憶

reference

• ppt： https://react-book-slide.vercel.app/1
• 官方文件：https://react.dev/reference/react/useState