【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方法入栈。

(未完待续)

相关推荐