React中面试常见的问题----setState是同步还是异步？

一月清辉

已于 2023-03-06 16:36:59 修改

阅读量809

点赞数 2

分类专栏： react 文章标签： setState

于 2020-04-19 21:27:55 首次发布

本文链接：https://blog.csdn.net/yiyueqinghui/article/details/105622484

版权

17 篇文章 1 订阅

订阅专栏

在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。

setState它本身的方法调用是同步的，但是并不代表着调用了setState后，state立刻就更新了，这个更新是要根据我们当前执行环境的上下文来确定的。

为了让避免这种情况，可以使用setState中传入一个回调函数作为第二个参数来解决

this.setState({
      value:100
},()=>{
   //这个回调函数会在更新状态时执行，所以可以获取到最新的值
})

关注