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

接上文，

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

创建初始子组件

在之前的步骤里，组件本身的构建已经完成，接下去，我们分析它们的子元素。总共分为两步：挂载子元素（this.mountChildren）和链接子元素到其父组件（DOMLazyTree.queueChild）。我们先进行子元素挂载的分析。

React源码里有个独立的模块ReactMultiChild（srcrendererssharedstackreconcilerReactMultiChild.js）管理组件的所有子元素。我们先看下mountChildren方法，它包含两个主任务。第一个，实例化子元素（使用ReactChildReconciler）并挂载它们。那么子元素有哪些类型呢？可以是HTML标签，也可以是其他自定义组件。对于HTML元素，我们需要实例化ReactDOMComponent，对于自定义组件，则是ReactCompositeComponent。至于具体挂载流程，基于子元素类型的不同而有不同的挂载过程。

回顾流程

到这里，是时候回顾下整个挂载的流程了。我们稍作休息，然后整理下整个流程中需要使用的对象。大概过程如下：
1）React实例ReactCompositeComponent来操作每个自定义组件（期间会有组件生命周期方法的执行，如componentWillMount）并且挂载它们。
2）在初次挂载期间，自定义组件的实例将会被创建（constructor方法会被调用）
3）之后，组件的render方法会被调用（比如一个简单组件会返回一个div），然后通过ReactcreateElement方法，创建一个React元素。这些React元素会被直接或者在通过Babel转化jsx后用于替换render方法中的标签。这里的描述可能还不是很具体，我们看下一步。
4）对于div标签，我们需要一个DOM组件。所有在实例化的过程中，我们会通过元素对象（上一步创建的对象）来创建ReactDOMComponent的实例。
5）之后，我们需要将DOM组件挂载到DOM文档中，也就是说这里我们需要真正的创建DOM元素，并且添加事件监听器等等。
6）接着，我们继续处理DOM元素的子元素。按之前的步骤创建实例并挂载它们，根据子元素的类型，自定义组件还是html标签，来决定调用步骤1还是步骤5.直到递归完所有的内嵌元素。

整个过程就是如此，像你看到的一样简洁明了。
挂载的过程基本完成了。我们将componentDidMount方法入栈。

（未完待续）