美文网首页
setState是同步还是异步,setState之后发生了什么?

setState是同步还是异步,setState之后发生了什么?

作者: 爱翔是我二媳妇 | 来源:发表于2021-01-18 17:00 被阅读0次

先上一张图


image.png

isBatchingUpdates

决定setState是否异步的属性isBatchingUpdates, 表示是否处于正处于更新阶段。
isBatchingUpdates默认为false,也就是说,默认不会让setState异步执行。
但是有一个方法batchedUpdates,这个方法会去修改isBatchingUpdates的值为true,而当React在调用事件处理函数之前就会调用这个batchedUpdates,从而使isBatchingUpdates变为true

dirtyComponents

若正处于isBatchingUpdates:true阶段,state状态存储在dirtyComponents中,当isBatchingUpdates:false再批量执行。

那batchedUpdates方法是谁调用的呢?我们再往上追溯一层,原来是ReactMount.js中的_renderNewRootComponent方法。

也就是说,整个将React组件渲染到DOM的过程就处于一个大的事务中了。

结论

在React中,如果是由React引发的事件处理(比如通过onClick引发的事件处理),调用 setState 不会同步更新 this.state,除此之外的setState调用会同步执行this.state。

  • 所谓“除此之外”,指的是绕过React通过 addEventListener 直接添加的事件处理函数,还有通过setTimeout || setInterval 产生的异步调用。

  • 简单一点说, 就是经过React 处理的事件是不会同步更新 this.state的. 通过 addEventListener || setTimeout/setInterval 的方式处理的则会同步更新。

原文链接

相关文章

网友评论

      本文标题:setState是同步还是异步,setState之后发生了什么?

      本文链接:https://www.haomeiwen.com/subject/ruvdaktx.html