React中setState触发新渲染的时机？异步回调多次setState异常疑问

你遇到的这个现象，核心在于React的批量更新策略只在特定执行上下文生效，异步回调（比如网络请求回调这类浏览器原生异步任务）不在这个范围内。

• 批量更新的适用场景
  React默认会自动合并多次setState调用，只触发一次渲染，这些场景包括：

  • React合成事件处理函数（如onClick、onChange）
  • React生命周期函数（如componentDidMount、useEffect的同步代码块）
  • 初始渲染流程

• 异步回调里的非批量更新
  像你代码里的网络请求回调，属于浏览器原生的异步任务，不在React批量更新的管控中。这种情况下，每调用一次setState，React都会立即发起更新流程，不会等待后续代码执行。这就是为什么你先看到控制台打印true false，执行完setStateB后又打印true true——两次setState各自触发了独立的渲染。

• React 18+手动强制批量更新
  如果用的是React 18及以上版本，可以用React.unstable_batchedUpdates手动包裹异步回调里的setState调用，强制合并更新：

  // async code, request callback() =>{
  React.unstable_batchedUpdates(() => {
    setStateA(true);
    setStateB(true);
  });
  // }
  

  这样两次setState会被合并，只触发一次渲染，控制台只会输出true true。

• 渲染触发的精准时机

  • 批量更新模式下：React会等当前执行栈清空（比如合成事件处理完毕、生命周期函数执行完成）后，一次性处理所有待执行的state更新，只触发一次渲染。
  • 非批量更新模式下：每次调用setState后，React会立即将更新加入队列并调度渲染，但渲染实际会在当前宏任务执行完成后才会进行。不过useEffect会在每次更新完成后执行，所以你会看到两次打印结果。

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