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

先上一张图


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 的方式处理的则会同步更新。

原文链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容