React何时会将变更应用到真实DOM上？

问题：众所周知，React基于Virtual Dom运行而非直接操作真实DOM。当state或props发生变更时，变更首先作用于虚拟DOM。那么调用setState()方法时，是否就意味着变更会同步应用到真实DOM上？

结论先行 #

调用setState()并不代表变更会同步应用到真实DOM上，setState的更新时机和React的批量更新机制直接相关，绝大多数场景下都是异步批量执行的。

不同场景的更新规则 #

• React 17及更早版本的默认场景：在React合成事件、组件生命周期钩子中调用setState时，React会开启批量更新模式，所有setState的变更会先存入更新队列，等当前整个上下文（比如整段事件处理逻辑）执行完毕后，才会统一触发虚拟DOM diff、批量更新真实DOM。
  举个常见的示例：

  // 初始state.count = 0
  handleClick = () => {
    this.setState({count: this.state.count + 1});
    console.log(this.state.count); // 输出0，此时state未更新，真实DOM也未变更
    this.setState({count: this.state.count + 1});
    // 两次setState会被合并，最终count只会更新为1，只会触发一次真实DOM更新
  }
  

• React 17及更早版本的特殊同步场景：如果在React管控的上下文之外调用setState，比如原生DOM事件绑定的回调、setTimeout/setInterval回调、Promise异步回调中，React的批量更新开关已经关闭，此时setState会同步执行更新，调用完成后即可读取到最新的state，真实DOM也会同步完成变更。
• React 18及以上版本的更新规则：React 18引入了自动批量更新特性，不管是在合成事件、生命周期，还是setTimeout、Promise回调等场景，默认都会对多个setState做批量合并处理，只会触发一次真实DOM更新，只有使用flushSync等特殊API主动跳出批量更新时，才会实现同步更新。

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