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

[judy152534]

導讀人： Robert
筆記工： Var
[本週簡報連結]

---

2024/4/17 3-1 ~ 3-2

1. 導讀討論

（1）batch update細節：Execution Queue與合併計算

舉例：the handleButtonClick

const handleButtonClick = ()=>{
    setCount(1);
    //...
    setCount(2);
    //...
    setCount(3);
    //...
}

第7行時，Execution Queue 被塞進前面三個 setCount

直到 function block 中所有程式結束後，開始 re-render 時，才會進行 state 的合併計算。

（2）為何執行 flushSync()之後，取到的 state 依然是舊的？

export default function App() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    flushSync(() => {
      setCount(1); // here, the real dom has been updated
    });

    // ...

    // ...

    console.log(count); // 0
  };

• 從 execution context 中的 stack 來看，長這樣：
  
• 當 flushSync() 執行完：
  
  • 這時因為 closure 的關係，取到的就是原始的 count 值
• 新一次的 render 拿到的才會是新版本的值，因為是一個新的 execution context

2. 觀念自我檢測

(1) 為什麼 React 並沒有而且也不需要子 component 向上溝通父 component 的專門機制？

1. 函式可透過props傳遞:
   將 setState 方法以 props 往下傳遞給子 component
   (component props 傳遞的資料型別沒有限制)
2. 呼叫 setState 方法會更新 state 以及觸發 re-render 的 component 是固定的

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

1. 將父 component 中的 state 所對應的 setState 直接或是加一些邏輯封裝成自定義的新函式透過 props 傳遞到子 component 中。
   (注意：不一定要把 setState 傳遞下去)
2. 在子 component 從 props 取得該 setState，或是呼叫包含該 setState 的自定義函式，並在希望觸發資料更新的地方呼叫它。

(3) 什麼是 batch update？

指在單一事件中，多次呼叫了 setState 方法後，React 會自動依序合併試算 State 的目標更新結果，最後統一呼叫一次 re-render 來完成畫面的更新。除了可以優化效能，也能預防以半成品的方式重新渲染。

(4) 如果想要手動指定某些 setState 方法的呼叫不要 batch update 時，可以怎麼做？

可使用flushSync方法來達到，只要將setState方法的呼叫放進flushSync()的 callback 函式中，React 就會以同步的方法立即性的觸發 component 的 re-render，並完成實際 DOM 的操作更新。

(5) 什麼是 uupdater function？比起直接指定新的 state 值來說有什麼好處？

1. 基於當前狀態計算新狀態，相較於直接指定新的 state，它能避免因為狀態更新的非同步而引起的問題，確保狀態的更新是基於最新的狀態資訊。
2. 不需要父 Component 傳遞 State Props

3. 問題討論 & Zet 的講解

3.1. 是否每次都要優先使用 updater function?

• 不需要每次都優先使用，實務上不太會先選 updater function，反而優先不要使用 updater function，除非真的需要時再使用，而且要注意非同步情況可能會有預期外的結果
• 雖然書上範例連續呼叫 setCount，但其實實務上很少用到，會直接指定值

3.2. 什麼時候不適合使用 updater function?

• 舉一個不適合使用 updater function 的反例:
  當使用非同步呼叫 setState()，但又想取特定時刻的state

    import { useState } from 'react';
    import { flushSync } from 'react-dom';
  
    export default function App() {
      const [count, setCount] = useState(0);
      const click = () => {
        setTimeout(() => {
          setCount(count ＋ 1); //最後結果為1
        }, 2000);
  
        setCount(100);
      }
  
      return (
        <div>
          {count}
          <button onClick={click}>b</button>
        </div>
      );
    }

  • 因為 closure 的關係,在 setTimeout 這個 scope 拿到的 count 會是原先 useState() 的0
  • 畫面變化：0->100->1

  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); //實際會拿到 n = 100,最後結果為101
      }, 2000);
  
      setCount(100);
    }
  
    return (
      <div>
        {count}
        <button onClick={click}>b</button>
      </div>
    );
  }

  • 如果用非同步的方式呼叫 setCount() ，且裡面傳 updater function，非同步的updater function 取出的會是目前內部 state 最新的值，會錯誤的取出最新的值，造成結果不如我們的預期

• 非同步呼叫時，可能 component 在那之前有先 re-render 過 state，所以最後拿出的state 可能不符預期

• 多數實務情況下，會直接拿那次 render 版本的 count 來更新值，如: setCount(count + 1)

4.3. 討論區題目

• 題目: batch update 指的是會在事件內沒有其他邏輯要處理後，一次執行 re-render 並合併計算 state 值的更新，但前面有提到，呼叫 setState 後會用 Object.is() 比較新舊值來決定要不要 re-render，兩者的先後順序是什麼或是否有衝突? (換句話說，state 值的更新計算在何時發生? re-render 前還是後?)

Zet: 流程太複雜所以書上故意沒寫清楚，但這部分即使沒有很明白也不影響對整體運作的理解，但這是很好、也很有細節的問題

• code example: https://codesandbox.io/p/sandbox/updater-function-de-zhi-xing-shi-ji-8s2wq9?file=%2Fsrc%2FApp.jsx

• state 具體何時被更新?
  

  • React 看到 setState 後會先比較新舊值以確認要 re-render，在 re-render 時會再次執行到 useState，此時執行 useState 時才會去看 state 的待執行佇列，並合併計算、得到最新的 state 值，拿出最新的 state 值回傳，此時才拿到最新的 state 值
  • 在執行 useState 之前，state 還是舊的，執行 useState 時才會去做值的更新，在那之後才會拿到更新後的 state 值

        //假設這是在 re-render MyComponent
        function MyComponent(){
            //這時還沒更新 count 的 state 值，這時的 state 值還是上一次 render 的舊值
            const [count, setCount] = useState(0); //這裡計算待執行佇列，拿到新的 state 值
            //這裡才可以拿到新的 state 值
        }

• React 怎麼知道要不要 re-render?

  • 如果是直接指定值的更新，如: setCount(count+1)，因為已經給了固定值，React 知道這個值是什麼，新舊值比較下知道不同，所以會觸發 re-render
  • 如果是以 updater function 來更新值，如: setCount(n => n + 1)
    • updater function 需要計算才知道值算出來會不會不同、要不要更新
    • 因此 React 會嘗試執行 setCount(n => n + 1) 裡面的 updater function，去看值會是什麼，計算後才能檢查這個 state 和舊的是不是一樣
      • 如果試執行第一個 updater function 後，得到的值不同，就知道需要 re-render，就不會再試執行後面的 updater function 了，接著在結束事件後會觸發一次 re-render，才執行後面的 state 的 update 的計算
    • React 看到 updater function 會依序嘗試執行，直到看到一個新舊值比較不一樣的，確定需要 re-render 後，才在事件結束後去執行一次 re-render
      • 補充: 確定需要 re-render 後，後面的 state 更新就不會去嘗試執行
      • 在 re-render 時，會繼續計算後面的 state 值，此時不會重複執行剛剛嘗試執行過的 updater function，而是繼續執行後面沒執行過的 state 值的更新(可能是直接給定值的、也可能是 updater function)
      • 補充: 即使預先執行 updater function，也不會馬上更新該 state，只是先暫存在 queue 內，re-render 時若在 useState 的執行前取得該 state 值，仍然會是舊的 state

• state 的待執行 queue 具體執行時間不一定

  • 如果遇到 updater function、還沒確定要不要 re-render，為了先確認是否需要 re-render，值的計算可能有些會在 re-render 之前預先執行
    • 但預先執行 updater function，也不會馬上更新該 state，re-render 時如果在useState 呼叫前，一樣還是拿到上次 render 的舊值
  • 如果已確定要 re-render，值的計算就會在 re-render 後，呼叫 useState 時才會做計算並更新

• 用 class component 的方式可以拿到這個 component 的 fiber node

  • (但不要亂取用、也不要亂改 fiber node)

Zet: 懷疑書上的東西、多去驗證你的想法

DEMO 連結：點我