React状态更新重渲染时机：单状态即触发还是待全部更新？异步场景解析

先看你给出的代码示例：

const [a, set_a] = useState();
const [b, set_b] = useState();

const callback = async () => {
  const res = await api_call()

  set_a(res.data.a); // A
  set_b(res.data.b); // B
} 

这个场景下的重渲染次数和时机，取决于你使用的React版本：

• React 18及以上版本：
  React 18默认开启了「自动批处理」功能，不管状态更新是在同步代码里，还是异步回调（比如await之后、Promise.then、setTimeout）里，都会自动把多个状态更新合并成一次，只触发一次重渲染。所以上面的代码里，set_a和set_b会被批量处理，组件会等整个callback函数执行完后，才进行一次重渲染。

• React 18之前的版本：
  旧版本的React只有同步代码里的状态更新会被批量处理，异步回调里的状态更新不会。所以在await之后执行的set_a会立即触发一次重渲染，set_b执行后又会触发第二次重渲染，总共两次。

简单总结：React 18+会合并异步回调里的状态更新，只渲染一次；老版本会分别触发两次渲染。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture