React中setTimeout对批量更新的影响及重渲染次数疑问

核心结论：setTimeout中的状态更新会跳出批量更新机制 #

React的批量更新仅在由React管理的上下文中生效，而setTimeout这类异步回调脱离了React的管控，其中的状态更新会直接触发独立渲染，无法被批量合并。

你的代码为何最终渲染4次？ #

我们逐次梳理渲染触发时机：

1. 初始渲染：组件首次加载，renders.current从0变为1。
2. 点击按钮后的同步更新：handleClick中同步执行setStatus3(true)，这处于React的onClick事件上下文，但因仅单个状态更新，触发第二次渲染，renders.current变为2。
3. 2秒后异步更新：第一个setTimeout回调执行setStatus1(true)，此时不在React管理的上下文内，触发第三次渲染，renders.current变为3。
4. 5秒后异步更新：第二个setTimeout回调执行setStatus2(true)，同样脱离React管控，触发第四次渲染，renders.current变为4。

React批量更新与渲染的具体规则 #

批量更新生效的场景 #

React会自动将多个状态更新合并为一次渲染，仅在以下由React主导的上下文中生效：

• React内置事件处理函数（如onClick、onChange）
• 组件生命周期方法（如componentDidMount）
• useEffect回调函数

比如在同一个onClick里连续调用3次setState，只会触发一次渲染。

批量更新不生效的场景（React 17及更早） #

在脱离React管控的异步操作中，每个状态更新都会单独触发渲染：

• setTimeout/setInterval回调
• 原生事件监听（如addEventListener绑定的回调）
• Promise.then/catch回调

React 18的自动批量更新优化 #

React 18默认启用自动批量更新，扩展了批量生效的范围，包括setTimeout、Promise等异步操作中的状态更新。但注意：如果是单个状态更新，无论是否批量都会触发一次渲染；只有同一异步回调中的多个状态更新才会被合并。比如：

// React 18中，以下代码仅触发一次渲染
setTimeout(() => {
  setStatus1(true);
  setStatus2(true);
}, 1000);

内容的提问来源于stack exchange，提问作者Indra