react batch是如何工作的?

Question

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

观察:写入setStates的数量导致了大量的重呈现。当我注释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");
};

我的理解是它会做批处理，只导致一次渲染。但是有三次重渲染。对此有什么解释吗?

Answer 1

withreact18自动批处理在默认情况下被应用，如果你在一个函数中返回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);
};

所以对于上面的例子，react将在点击clickMe()函数时重新渲染你的组件两次，但如果你是在older version < 18上，重新渲染将发生n次。