第三組讀書會 5-1 ~ 5-2

[janlin002]

主講人: Ohtani
筆記工: Jan

QA

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

Mount -> Update -> Unmount

Mount

流程:

• 當 component 以 React Element 的形式出現在畫面時，就會發起一次「Mount」的流程
• React 內部會建立 fiber nide 的資料，用來存放實例的各總資料
• 執行 component function 以 props 跟 state 來構成初始畫面
• 第一次 render 時，瀏覽器透過 .appendChild 方法，將 React Element 轉化後的 DOM element 渲染到畫面上
• 執行副作用(useEffect)

Update

所謂的 Update 也就是再次執行渲染的過程，在 React 中唯一能夠觸發畫面重繪的手段只有 setState

流程:

• 當畫面上的任何一個 setState 被觸發的時候，就會造成 Update
• 只去更新那些新舊 Element 不同的部分，其餘部分不會進行任何操作
• 執行前一次 render 版本的 cleanup 函式，接著才會去執行我們這次 render 的 useEffect 函式

Unmount

當該 React Element 不存在於最新 re-render 後的畫面中，就會進入「Unmount」階段
流程:

• 當發現某次的 component 不存在於 re-render 的畫面中，就會觸發「Unmount」階段
• 執行最後一次的 cleanup 函式
• 將該 React Element 從畫面中移除

2. Function component 有生命週期的 API 嗎？

沒有，useEffect 其實不是真的生命週期

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

雖然 props 本身是 immutable 的，但是 this 不是，所以當 class component re-render 時， React 會將最新版的整包 props 以 mutable 的方式直接塞到 this 當中，取代 this.props

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

由於 JS closure 的特性，event handler 函式在建立時會綁定到當次的 props 和 state，因此無論何時觸發，event handler 讀到的 props 和 state 始終不變

額外討論:

---

1. 如果今天這個 useEffect 的 effect 函式很龐大，裡面依賴了相當多資料，因而導致 dependencies 按照 ESLint 指示會填入很多參數，這時候你們會怎麼做？