【React】—setState机制

概述:

setState通过一个队列机制实现state更新。

当执行setState时,会将需要更新的state 合并后 放入状态队列,而不会立刻更新this.state。

队列机制可以高效地批量更新state。


setState调用栈:

1.setState源码概况:

setState -> 

enqueueSetState(进行状态队列_pendingStateQueue合并操作。每一个component都有一个自己的_pendingStateQueue) -> 

enqueueUpdate(接收一个参数,当前component) -> 

处于批量更新模式:dirtyComponents.push(component)   或

不处于批量更新模式:batchedUpdates(enqueueUpdate,component)->

 batchedUpdates调用transaction.perform(参数:enqueueUpdate,component)执行队列更新函数

事务的作用:将需要执行的方法用wrapper封装起来,再用事务的perform方法执行。即:此处执行完所有wrapper中的initialize方法后,执行enqueueUpdate,再执行wrapper中所有close方法。

2.setState调用栈图示


setState简化调用栈


关于事务,注意:

整个将React组件渲染到DOM中的过程就处于一个大的事务中。此时,batchedUpdates被调用,batchingStrategy.isBatchingUpdates == true,所以在componentDidMount中调用setState,不会立即生效。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容