博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【Under-the-hood-ReactJS-Part6】React源码解读
阅读量:7118 次
发布时间:2019-06-28

本文共 1057 字,大约阅读时间需要 3 分钟。

接上文,

React流程图:

创建初始子组件

在之前的步骤里,组件本身的构建已经完成,接下去,我们分析它们的子元素。总共分为两步:挂载子元素(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方法入栈。

(未完待续)

转载地址:http://subel.baihongyu.com/

你可能感兴趣的文章
JSP+JDBC_假分页
查看>>
mac实战mesos
查看>>
MacOS下给树莓派安装Raspbian系统
查看>>
Linux强制重启
查看>>
虚拟机安装VMware Tools
查看>>
MySQL复制原理与配置
查看>>
内核的调试
查看>>
【转】合并压缩js,减少http请求次数
查看>>
java开发常用linux命令
查看>>
uva 591 - Box of Bricks
查看>>
Apache启动失败
查看>>
zf2返回json
查看>>
httpOnly Cookies using web.xml servlet 3.0 in JBos
查看>>
判断上下滚动
查看>>
Java——面向对象(二)
查看>>
3、jstat:内存信息统计
查看>>
前端基础(七):cookie操作
查看>>
CAS 与 Spring Security 3.1整合配置详解
查看>>
港行Galaxy Nexus(i9250)无法更新4.3的问题的解决
查看>>
SpringMVC 返回中文字符串时乱码
查看>>