加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React学习-- React源码(4)setState机制

发布时间:2020-12-15 07:16:38 所属栏目:百科 来源:网络整理
导读:React通过this.state来访问state,通过this.setState来更新state。当setState被调用的时候,React会重新调用render方法来重新渲染组件。 setState异步更新 setState通过一个队列机制实现state更新。当执行setstate时,会将需要更新的state合并后放入状态队列

React通过this.state来访问state,通过this.setState来更新state。当setState被调用的时候,React会重新调用render方法来重新渲染组件。

setState异步更新

setState通过一个队列机制实现state更新。当执行setstate时,会将需要更新的state合并后放入状态队列,而不是立即更新state。这样的队列机制可以高效的批量更新state。

需要注意,不可以使用this.state.value = 1这样的方式来更新state,否则,该state将不会被放入状态队列中。

setState循环调用风险

如果在shouldComponentUpdate和componentWillUpdate中调用了setState,此时this._pendingStateQueue != null,则performUpdateIfNecessary方法就会调用updateComponent方法进行组件更新。但是updateComponent方法又会调用shouldComponentUpdate和componentWillUpdate,因此造成循环调用,使得浏览器内存占满后崩溃。

setState调用栈

其实,setState最终是通过enqueueUpdate执行state更新。下面我们来看enqueueUpdate到底是如何更新state的。

下图是一个简化了的setState调用栈:

解释:
如果处于批量更新模式,则对所有队列中的更新执行batchedUpdate方法;否则,如果不处于批量更新模式,则仅仅把当前组件即调用了setstate的组件,放入dirtyComponent数组中。

事务

事务就是将需要执行的方法用wrapper封装起来,再通过事务提供的perform方法执行。在perform之前,先执行所有wrapper中的initialize方法,执行完perform之后(即需要执行的方法)再执行所有的close方法。一组initialize和close称为一个wrapper。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读