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

接上文,

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

this.setState

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

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

//src\isomorphic\modern\class\ReactComponent.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是如何工作的。这个问题,我们会在下一篇文章中进行解答。。。
(未完待续)

    原文作者:剡山
    原文地址: https://segmentfault.com/a/1190000015439491
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞