摘要：源码里有个独立的模块管理组件的所有子元素。第一个，实例化子元素使用并挂载它们。至于具体挂载流程，基于子元素类型的不同而有不同的挂载过程。挂载的过程基本完成了。
接上文，
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方法入栈。
（未完待续）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95828.html
摘要：技术上来说，当方法被调用后或者发生改变后，方法都会被调用。下一步，会设置为。之后，检测当前更新是否由更新引起的。这是因为，使用是导致组件持久化更新，而会被方法的返回值重新赋值。 接上文， React流程图：https://bogdan-lyashenko.gith... 更新组件 关于组件的更新，我们先看下代码里的注释： 对于已挂载组件的更新过程，React会首先调用component...
摘要：接上文，流程图我们已经知道挂载的工作流程，现在我们换个方向研究下方法，这个也是的重要组成部分。这个问题，我们会在下一篇文章中进行解答。。。 接上文， React流程图：https://bogdan-lyashenko.gith... this.setState 我们已经知道挂载的工作流程，现在我们换个方向研究下--setState方法，这个也是React的重要组成部分。 首先，为什么我...
摘要：当鼠标事件发生时，组件的最外层会进行处理，然后通过几层包装器的处理后，会开始进行批量更新操作。在这之后，会将这些事件处理成常见到样子。 接上文， React流程图：https://bogdan-lyashenko.gith... 回到最初 在流程图中，也许你已经注意到，setState方法可以通过几种方式触发，更准确的说，可以分为是否由外部引起的（也就是是否由用户触发）。让我们看下如下...
摘要：接着，将返回的元素和之前的进行比较的，以验证是否真的需要更新。我们看下代码，代码比较简单好，对应于我们的这个列子，我们对于方法的更改并不会对方法造成影响。所以我们进入下一步，也就是对于节点的更新。 接上文， React流程图：https://bogdan-lyashenko.gith... 如果组件真的需要更新 在组件刚开始更新过程时，如果有定义componentWillUpdate方...
摘要：接上文，流程图子组件挂载我们继续探究方法。对于我们的实例代码而言，就是标签，所以没有额外的处理过程。属性验证紧接着的被调用的验证方法用于确保被正确设置，否则，会抛出异常。 接上文， React流程图：https://bogdan-lyashenko.gith... 子组件挂载 我们继续探究mount方法。 如果渲染的标签里有复杂的html标签，如video，form，textarea等...
阅读 1670·2021-11-17 09:33
阅读 1220·2019-08-30 15:44
阅读 1277·2019-08-29 18:42
阅读 310·2019-08-29 13:59
阅读 617·2019-08-28 17:58
阅读 2670·2019-08-26 12:02
阅读 2302·2019-08-23 18:40
阅读 2268·2019-08-23 18:13
