反应批处理如何工作？

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 次。