Javascript react 批处理如何工作

发布于06月23日

我有一个select字段和onselect事件，我有三个setStates调用来更新本地状态.

观察:写入的setStates数会导致大量的重新呈现.当我 comments 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次重新渲染.对此有何解释？

推荐答案

默认情况下，当应用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次.