反應批處理如何工作？

Question

我有一個選擇字段和 onselect 事件我有三個 setStates 調用來更新我的本地狀態。

觀察：寫入的 setState 的數量會導致大量的重新渲染。 當我評論 setState 時，它​​相應地減少了。

前任：

<select name="cars" id="cars" onselect={(e) => handleSelect(e)}>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

const handleSelect = e => {
    setInvalid(false);
    setValue("some value");
    setError("some error");
};

我的理解是它會進行批處理並且只導致一次渲染。 但是得到了 3 次重新渲染。 對此有何解釋？

Answer 1

默認情況下，使用react18自動批處理，如果您在函數內返回 n 次狀態更新，react 只會重新渲染組件一次。 如果你想停止這種行為，你可以使用flushSync

import { flushSync } from "react-dom";
 const clickMe = () => {
    setName("abc");
    flushSync(() => {
      setCount(30);
      // react will create a re-render here
    });
    setAge(30);
    setPin(1111);
  };

因此對於上面的示例，當單擊 clickMe() 函數時，react 將重新渲染您的組件兩次，但如果您使用的是older version < 18 ，則重新渲染將發生 n 次。