【Under-the-hood-ReactJS-Part8】React源码解读

发布时间:2019-06-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【Under-the-hood-ReactJS-Part8】React源码解读脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

接上文,

React流程图:
https://bogdan-lyashenko.gith...

this.setState

我们已经知道挂载的工作流程,现在我们换个方向研究下--setState方法,这个也是React重要组成部分。

首先,为什么我们可以在一些方法中调用setState方法呢?显然,我们的组件是从Reactcomponent组件继承下来的。我们去React码中看下setState方法的实现:

//srcisomorphicmodernclassReactComponent.js#68
this.updater.enqueueSetstate(this, partialState)

正如你所见的那样,代码里有updater的相关调用,那么,什么是updater呢?在我们对挂载过程的分析中,mountComponent的调用过程里,实例会接收一个updater,作为对
ReactUpdateQueue的引用(srcrendererssharedstackreconcilerReactUpdateQueue.js)

深入到enqueueSetState方法中,在起初,React会将partial state对象(通过this.setState传入的对象)压入到内部实例的_PEndingStateQueue中(公共实例,指的是<ExampleApplicatioin>这种自定义实例,而内部实例,则是指挂载过程中创建的ReactComposITeComponent组件)。紧接着,在调用enqueueUpdate方法的过程中,会检查是否组件在更新过程中并将自定义组件压入到dirtyComponent的列表里,
如果没有在更新过程中,则初始化更新事务并压入组件到dirtyComponent里。

概括下,每个组件都是有自己的阻塞状态列表,每次你在一次事务中调用setState方法,
其实只是将对象压入到一个队列里,然后,它们会依次合并成一个状态。同时,当你调用setState方法时,React会将你的组件压入到dirtyComponent的列表里。看到这里,你可能会有疑问,dirtyComponent是如何工作的。这个问题,我们会在下一篇文章中进行解答。。。
(未完待续)

脚本宝典总结

以上是脚本宝典为你收集整理的【Under-the-hood-ReactJS-Part8】React源码解读全部内容,希望文章能够帮你解决【Under-the-hood-ReactJS-Part8】React源码解读所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。