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

[jolinhappy]

2024/3/31 2-8 ~ 2-9

簡報: https://hackmd.io/yI1c08MiRhWSNr457tdAyw?view#/

導讀人： Nono
筆記工： 粉粉

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

什麼是State

• 用來記憶應用程式當下的狀態
• 資料更新會連動到畫面的更新
• 在單向資料流機制中的角色是可更新的原始資料
• 是component內的狀態儲存資料載體
• state資料更新，也就是進行setState時，會觸發該component以內的畫面重繪(包含子元件)
• 其生命週期隨著component存在及死亡

useState

React內建的hook，實際state和畫面重繪的核心機制
定義及更新程式的狀態資料，並觸發元件的重繪

useState的使用

• useState會回傳一個陣列，會用陣列解構的方式來使用。且會使用DOM Events將更新的state的動作綁定上去。
• 呼叫setState會接受一個新的state當參數，並觸發re-render。
• 只有呼叫setState才能通知React進行re-render的動作，直接對state進行改動，不會有re-render的效果。

import { useState } from 'react';

const initState = 0

export default App(props) {
    const [state, setState] = useState(initState)
}

1. state: 該次 render 的當前 state 值
2. setState: 用來更新 state 值的方法
3. initState: 用來指定 state 初始值

React不會立即觸發re-render，會等到執行中的事件內的程式都結束，才進行re-render。

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

「方便開發者透過解構自定義state和setState function的命名」，如果是回傳物件，還會需要額外幫他另外取一個命自，如果直接解構，就會出現名字撞到的問題。

React 如何辨認 component 多個 state

• 只允許hooks在component function的頂層作用域被呼叫，以確保hooks在每次render都會被呼叫到，以維持固定不變的呼叫順序。
• hooks會在每次render都會依賴固定的呼叫順序區分多個state，React會在一個有序的列表中依照固定的呼叫順序儲存這些hooks的狀態資料。

componet 不同實例之間的狀態獨立

component可以產生一個獨立的實例，而每個實例中的狀態資料都是獨立且互不影響的，即使是使用相同的component來創建的實例。

Props 與 state 區別

• state：狀態資料的維護，儲存應用程式狀態資料載體
• props：服務父元件往下傳遞給子元件的管道

小補充

只有是可以對應到實際DOM Element的React element，才會內建onClick事件的綁定props，如果是component類型的React element則會變成一般的props帶入(例如：)。

延伸資料補充 - Hooks

什麼是Hooks

React提供的API，use開頭的函式

Hooks解決了什麼問題

• 解決原本狀態相關的邏輯在class component中難以複用的問題
• 避免複雜的元件邏輯越寫越難理解
• class對於開發者不好理解的問題

Hooks的使用規則

只能在function component頂層作用域呼叫

export default function Counter() {
  useState(0); // O

  if(...) {
    useState(0); // X
  }

  for(...) {
    useState(0); // X
  }
}
useState(0); // X

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

關於Render

畫面處理機制分為兩個階段

• Render phase: component渲染並產生React element
• Commit phase: component將React element提交並處理實際的瀏覽器DOM中

初次Render & re-render

初次Render

• Render phase:
  • 呼叫component function，並且以當前的props和state等資料來產生初始畫面
  • 將React element交給commit phase處理。
• Commit phase:
  • 第一次的render實際的DOM因為還沒有任何對應的DOM element，因此將所有React element進行轉換並透過DOM API appendChild()放置到實際畫面中。
  • 這個流程也被稱為mount，當流程完成時稱為mounted。

re-render

• Render phase:
  • 再次呼叫component function，並且以新的props和state等資料，完整的重新產生對應的React element。
  • 將新的React element與前一次的React element進行樹狀結構比較，找出其中差異之處，將其交給commit phase處理。
• Commit phase:
  • 只去操作並更新差異之處所對應的實際DOM element。

Reconciliation

呼叫setState更新state > 用object.is()檢查新傳入的state是否有不同 > 相同就結束接下來的流程，不相同就呼叫component function > 呼叫component function以最新的props及state產生新的react element > 以diffling演算法來進行樹狀結構比對新版的 React element 與舊版的 React element > 比較差異處，到commit phase中更新DOM element。

Q&A

章節複習

• React 中 State 的本質是什麼？ State 在 React 畫面管理機制中扮演什麼角色？
  A: state是前端應用程式中用於記憶狀態的臨時且可更新的資料，React將更新state資料的動作作為發起重繪的啟動點。

• state與component的關係是什麼？
  A: state必須依附在component內部才能記憶並維持狀態資料，發起state的更新及觸發重繪時，只會重繪該component內(包含子孫代元件)的畫面區塊

• React 更新畫面 Reconciliation 流程
  A: 呼叫setState更新state > 用object.is()檢查新傳入的state是否有不同 > 相同就結束接下來的流程，不相同就呼叫component function > 呼叫component function以最新的props及state產生新的react element > 以diffling演算法來進行樹狀結構比對新版的 React element 與舊版的 React element > 比較差異處，到commit phase中更新DOM element。

• component有哪些可能會被觸發re-render情況
  A:

  • component內有定義state，且呼叫setState進行state的更新時
  • 父層component發生re-render時，底下的子component也會re-render
  • 使用了context並且context的值發生變化時，依賴於該context的component就會重新渲染

延伸提問

• setCount(prev=>prev+1) 跟setCount(count+1)的差異？
  A: prev=>prev+1這樣的寫法是updater function，它可以記住前一次變更後的值來進行其他的處理，寫成一般count+1，就只會取得re-render前的值。這部分與batch update有關，更深入的內容可以先參考3-2章節的內容。

• props會影響到component被re-render嗎？
  Zet: 不會，但是父component re-render就會造成子component被呼叫。

Zet的動動腦提問

• object.is拿掉，對畫面最後的呈現會造成問題嗎？
  A: 不會，這個步驟只是為了優化效能，避免進行不必要的re-render，就算拿掉這個檢查，畫面一樣可以正常被呈現出來。
• 解釋呼叫setstate到瀏覽器發生變化，發生什麼事情？(面試考題)
  A: 呼叫setState後，會通知React我們正在進行state的更新，更新state後，會用Object.is()比較新舊state是否有差異，如果沒有差異，就不會接下來的動作，如果比較出來有差異，就會先呼叫component function，以新版的state和props產生當前版本的新的React element，接著會比較前一個版本的state產生出來的舊版React element和新版React element的差異，接著再將差異之處更新到實體的DOM element上。

其他討論

• 大家怎麼準備讀書會
  Nono：自己讀一遍，再去思考，以及搭配自己工作上的實務狀況，再去統整。