【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是如何工作的。这个问题，我们会在下一篇文章中进行解答。。。
（未完待续）