react的setstate同步情况是什么

本文小编为大家详细介绍“react的setstate同步情况是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“react的setstate同步情况是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联-专业网站定制、快速模板网站建设、高性价比宣化网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式宣化网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖宣化地区。费用合理售后完善，十年实体公司更值得信赖。

react的setstate在原生事件和setTimeout中都是“同步”的，而在合成事件和钩子函数中是“异步”的；在React中，如果是由React引发的事件处理，调用setState不会同步更新“this.state”，除此之外的setState调用会同步执行“this.state”。

react的setstate什么时候同步？什么时候是异步的？

先给出答案:

有时表现出异步,有时表现出同步。

setState只在合成事件和钩子函数中是“异步”的,在原生事件和setTimeout 中都是同步的。

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.setState只在合成事件和钩子函数中是“异步”的，在原生事件和setTimeout 中都是同步的。

2.setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，

导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。

3.setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，

在“异步”中如果对同一个值进行多次setState，setState的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时setState多个不同的值，在更新时会对其进行合并批量更新。

在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。

原因：

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

读到这里，这篇“react的setstate同步情况是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。