react this.setState 异步和同步原理

最新推荐文章于 2024-08-07 09:56:43 发布

前端同学

最新推荐文章于 2024-08-07 09:56:43 发布

阅读量1.1k

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/weixin_44730897/article/details/109093196

版权

react 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文详细探讨了React中setState的同步与异步执行情况，解释了在React事件处理和生命周期方法中，以及在setTimeout等异步场景下setState的行为差异。总结了在不同情况下setState的执行逻辑，并通过一个代码示例展示了输出结果。

摘要由CSDN通过智能技术生成

React 中 setState 什么时候是同步的，什么时候是异步的？
isBatchingUpdates 判断是否批量更新，默认值为 false，当更新完成时又会被复原为 false

在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理，自身的事件处理函数或 react 生命周期触发时），isBatchingUpdates 会被赋值为 true，调用setState不会同步更新this.state。
绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用，setState调用会同步执行this.state

原因：在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

注意： setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。

练习：下面的代码输出什么？

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }

  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};

1、第一次和第二次都是在 react 自身生命周期内，触发时 isBatchingUpdates 为 true，所以并不会直接执行更新 state，而是加入了 dirtyComponents，所以打印时获取的都是更新前的状态 0。
2、两次 setState 时，获取到 this.state.val 都是 0，所以执行时都是将 0 设置成 1，在 react 内部会被合并掉，只执行一次。设置完成后 state.val 值为 1。
3、setTimeout 中的代码，触发时 isBatchingUpdates 为 false，所以能够直接进行更新，所以连着输出 2，3。

输出： 0 0 2 3