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