第 4 組讀書會 3-1 3-2

[huishanchiu]

簡報連結

3-1 如何在子 component 裡觸發更新父 component 的資料

1. 為什麼 React 並沒有，而且也不需要子 component 向上溝通父 component 的專門機制?
   因為 useState 中的 setState 可以透過 props 從父傳到子，以及這個 setState 不僅在原本的 component 裡，就算傳到其他 component 還是可以正常對 state 做操作，這樣的機制已經可以滿足「子 component 向上溝通」這件事，不需特別設計

2. 如何在子 component 中觸發父 component 的 state 資料
   將父層的 setState 以 props 形式傳到子層，在子層呼叫 setState 方法，並在子層呼叫 setState function

3-2 深入理解 batch update 與 updater function

1. 什麼是 batch update？
   批次處理，只有最後一項會更新，原因是可以防止以半成品的結果顯示，以及提高效率

2. 如果想要手動指定某些 setState 方法的呼叫而不要 batch update ，可以怎麼做？
   可以使用 flushSync，就不會批次執行

3. 什麼是 updater function ？比起直接指定新的 state 值來說有什麼好處？
   根據原本的值去做延伸的計算，例如：加減乘除，不需要去在意他原本的值是多少

4. 點擊按鈕後，count 數值會更新為？

A:setTimeout 裡的count 會是原先 useState 的 0
0 -> 100 -> 1，最後結果為 1

5. 點擊按鈕後，count 數值會更新為？

A:updater function 取出的值會是內部 state 最新的值 100
100 -> 101

---

聊天室的討論:

對 rerender 有疑慮的話一率推薦 React-Scan 去看頁面狀態
https://react-scan.com/

component 的 props 可以用解構的方式傳入
https://zh-hans.react.dev/learn/passing-props-to-a-component#forwarding-props-with-the-jsx-spread-syntax

React 官方文件
https://react.dev/learn/state-as-a-snapshot