一篇文章彻底理解setState是同步还是异步！

原创

已于 2023-03-09 09:57:29 修改 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js #前端

于 2023-03-08 15:27:26 首次发布

React的setState在不同场景下可能是同步或异步的。当在生命周期方法如componentDidMount内，或者在setTimeout等非React调度流程中，setState可能表现为同步。在React的调度流程中，setState通常是异步的，以优化性能并避免不必要的DOM更新。文章讨论了setState的工作原理，包括scheduleUpdateOnFiber函数的作用，并提到了在function组件中useState的行为。此外，还强调了多次同步setState的潜在性能问题，并提供了案例分析来展示其影响。

本文内容均针对于18.x以下版本（18请看这篇文章=>React18 setState是同步还是异步？）

setState 到底是同步还是异步？很多人可能都有这种经历，面试的时候面试官给了你一段代码，让你说出输出的内容，比如这样：

constructor(props) {
  super(props);
  this.state = {
    data: 'data'
  }
}

componentDidMount() {
  this.setState({
    data: 'did mount state'
  })

  console.log("did mount state ", this.state.data);
  // did mount state data

  setTimeout(() => {
    this.setState({
      data: 'setTimeout'
    })

    console.log("setTimeout ", this.state.data);
  })
}

而这段代码的输出结果，第一个 console.log 会输出 data ，而第二个 console.log 会输出 setTimeout 。也就是第一次 setState 的时候，它是异步的，第二次 setState 的时候，它又变成了同步的。是不是有点晕？不慌，我们去源码中看看它到底干了什么。

结论

先把结论放到前面，懒得看的同学可以直接看结论了。

只要你进入了 react 的调度流程，那就是异步的。只要你没有进入 react 的调度流程，那就是同步的。什么东西不会进入 react 的调度流程？ setTimeout setInterval ，直接在 DOM 上绑定原生事件等。这些都不会走 React 的调度流程，你在这种情况下调用 setState ，那这次 setState 就是同步的。否则就是异步的。

而 setState 同步执行的情况下， DOM 也会被同步更新，也就意味着如果你多次 setState ，会导致多次更新，这是毫无意义并且浪费性能的。

scheduleUpdateOnFiber

setState 被调用后最终会走到 scheduleUpdateOnFiber 这个函数里面来，我们来看看这里面又做了什么：

function scheduleUpdateOnFiber(fiber, expirationTime) {
  checkForNestedUpdates();
  warnAboutRenderPhaseUpdatesInDEV(fiber);
  var root = markUpdateTimeFromFiberToRoot(fiber, expirationTime);

  if (root === null) {
    warnAboutUpdateOnUnmo