了解在 React 中設置 State 的代碼流

Question

我有這個基本代碼，它從處理程序更新 state：

const wait = (ms) => {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
};

export default function App() {
  async function handleClick() {
    setData(1);
    console.log("first click");
    console.log(data);
    await wait(1000);
    setData(2);
    console.log("second click");
    console.log(data);
  }

  const [data, setData] = React.useState(0);
  return (
    <div>
      {data}&nbsp;
      <button onClick={() => handleClick(setData)}>Click Me</button>
    </div>
  );
}

我正在嘗試了解操作順序，有人可以驗證或指出正在發生的事情的正確方向嗎？ 我已經進行了研究，但還沒有找到關於我認為正在發生的事情的決定性來源。

1. 我們點擊按鈕，觸發處理程序
2. 處理程序運行setData(1) ，將任務排入事件循環
3. console.log('first click')運行
4. 我們記錄 state（數據），它仍然是 0，因為 setter 只被排入隊列
5. 我們遇到等待 function，所以我們在等待 1000 毫秒時退出同步代碼流
6. 同步代碼完成運行，所以我們出列下一個任務，即設置器 function，state 現在設置為 1，視圖重新呈現並反映新的 state
7. 1 秒過去后，我們返回 wait 后的代碼 function
8. setData(2)入隊另一個任務
9. 記錄“第二次點擊”
10. 0 仍然被記錄，因為我們的本地 state 沒有改變
11. 同步代碼完成，我們將 setter 出隊，重新渲染視圖，導致 2 出現

這一切都正確嗎？ 我誤解了什么嗎？ 謝謝你的幫助。

Answer 1

是的，你已經正確地記下了這個，除了可能的一點

運行setData(1) ，將任務排入事件循環

這可能涉及也可能不涉及事件循環。 setData中發生的事情特定於 react.js，並且不一定會在瀏覽器事件循環中排隊任務。 它確實“以某種方式”安排組件的 state 更新和重新渲染 - 在反應中。

如果我沒記錯的話，react.js 確實安排了由setData(1)引起的渲染到本機點擊處理程序的末尾，即當對onClick處理程序的調用返回以響應代碼時。 對於setData(2) ，渲染實際上可能在setData調用中同步發生，因為 React 不控制上下文。 然而，這可能會發生變化（開發人員正在討論異步地將多個更新批處理在一起）並且應該被視為一個實現細節。 如果您好奇，只需在組件的渲染 function 中放置一個console.log ，但不要編寫任何依賴於此測試中觀察到的順序的代碼！