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

[KuoMinLi]

《React 進化思維》3-1 ~ 3-2 讀書會討論筆記

• 連結：https://docs.google.com/presentation/d/1uWXf_cychV9AqN0z3fvcc33A9c_ht4s3/edit#slide=id.p1
• 導讀人：Andy
• 筆記工：四季春

---

Main QA:

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

1. 為什麼 React 沒有也不需要「針對子 component 向上溝通父 component 的專門機制」

因為如果父層被re-render，子元件也會一起更新，此時元件的狀態會是新的。

他不會認定哪裡來的呼叫，只要被呼叫 setState 就會re-render 機制，當父元件 被re-render 子元件也會被 re-render。

2. 如何在子 component 中觸發更新父 component 的 state 資料

用 props 傳遞 setState 傳遞到子元件中，並在需要的時候呼叫他。

---

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

1. 什麼是 batch update?

當一個事件中多次呼叫setState發法後, React 會自動的統一只呼叫一次，藉由合併多次 batch update 來減少 re-render 次數 以節省效能。

2. 什麼是 updater function ?比起直接指定新的 state 值有什麼好處?

1. updater function是根據原本state的資料去延伸計算並更新state
2. 好處為： 1.可以針對目前的state進行計算，並依佇列的動作依序執行。 ；2.不需要父 Component 傳遞 State Props 的 情況下，根據既有的 State 值來延伸計算，並更新 State。

---

Other QA:

1. 由於 closure (閉包) 特性 這個函式作用域中的 count 變數永遠為 0

不是因爲 closure 導致 count 都固定，是因為執行function 那當下 render 狀態 count 是固定的，所以closure所指向的 count 是相同的。

2. flushSync 什麼時候用到？

flushSync 有可能的情境是，做了某個 setState，接下來的動作需要實際的 DOM 去處理，或是去檢查某個 DOM 是不是真的被存在。

可能的情境需求為要在 某個setSatet 後，要測量實際 dom 的寬度，再去做之後 state 的處理。

3. 請問是只有當我需要使用舊版資料去做計算的時候，再使用 updater function 嗎？

沒錯是的。

4.如果全部都用 updater function 會有問題嗎

不建議全部統一用updater function

需要 updater function 情境

1. 需要拿到當下 state 持續在做計算時
2. 可以在子元件中直接去拿到 state 數值

反例：如果遇到非同步的情況

import { useState } from 'react';
import { flushSync } from 'react-dom';

export default function App() {
  const [count, setCount] = useState(0);
  const click = () => {
    setTimeout(() => {
      setCount(n => n + 1);
    }, 2000);

    setCount(100);
  }

  return (
    <div>
      {count}
      <button onClick={click}>b</button>
    </div>
  );
}

需求是希望拿到執行 click 當下 count 的數值(n = 0)，使用 updater function 可能導致與預期不符的狀況發生(實際會拿到 n = 100)