Virtual DOM 相当于一个虚拟空间，React 的所有工作几乎都是基于 Virtual DOM 完成的，包括虚拟节点及其属性的构建、更新、删除等工作。Virtual DOM 需要具备一个DOM标签所需的基本元素：标签名、节点属性(样式、属性、事件等)、子节点、标识id，示例如下
{
tagName: '',
properties: { style: {} },
children：[],
key: '',
}
Virtual DOM 中的节点被称为 ReactNode, 分为三种类型：ReactElement、ReactFragment 和 ReactText。其中，ReactElement 又分为 ReactDOMElement和 ReactComponentElement。不同类型节点的基础元素有所不同。
1、React元素的创建
React 元素的创建是通过 createElement(type, config, children) 方法。type 表示创建什么类型的DOM元素，config 声明属性列表，children 为子元素。本方法可接受多个参数，第三个至第N个都被当做子元素处理。
createElement() 主要做了三件事：
- 将 config 里的内容复制作为 React 元素的 props。
- 处理 children，全部挂载到 props 的 children 属性上。若只有一个参数，则直接赋值给 children。
- 如果某个 prop 为空且存在默认的 prop, 将默认 prop 赋值给当前 prop。
最后，返回 ReactElement 实例对象: return ReactElement(type, props, key, ref...)
2、React组件的创建
使用React创建组件时，会调用 instantiateReactComponent(), 这是初始化组件的入口函数。他会根据 node 类型来区分不同组件的入口。主要有一下几种情况：
- node为空，表明node不存在，则初始化空组件。
- node为对象，表明是 DOM 标签组件 (ReactDOMComponent)或自定义组件 (ReactCompositeComponent)。如果node.type === 'string' ，则初始化 DOM 标签组件，否则初始化自定义组件。
- node为字符串或数字，初始化 文本组件。
- 其他情况，不作处理。
3、文本组件
当node为文本节点时，不算 Virtual DOM 元素。但为了保持渲染的一致性，React将其封装为文本组件 ReactDOMTextComponent。
在执行 mountComponent 方法时，ReactDOMTextComponent 会判断该文本是否是通过 createElement 方法创建的节点。如果是，则为其创建相应的标签及标识 domID,这样每个文本节点也能和其他 React 节点一样拥有唯一标识；如果不是，就直接返回文本内容。
文本内容的更新则在 receiveComponent(nextComponent, transaction) 方法中执行。
4、DOM标签组件
ReactDOMComponent 针对 Virtual DOM 标签的处理主要是两部分：
- 属性的更新。包括样式、属性、处理事件等。
- 子节点的更新，包括内容、子节点。
4.1、更新属性
在执行 mountComponent 方法时， ReactDOMComponent首先会生成标记和标签，并对 DOM 节点的属性和事件进行处理。包括以下几点：
- 如果存在事件，则为当前节点添加事件代理。
- 如果存在样式，对样式进行合并，然后创建样式。
- 创建属性
- 创建唯一标识
当执行 receiveComponent方法时，会对属性进行更新，主要是：
- 删除不需要的旧属性。
- 更新新属性。
4.1、更新子节点
在执行 mountComponent 方法时，会获取节点内容 props.dangerouslySetInnerHTML。如果存在子节点，则对子节点进行初始化渲染。
当执行 receiveComponent方法时，会对DOM内容及子节点进行更新：
- 删除不需要的子节点和内容。
- 更新子节点和内容。
5、自定义组件
ReactCompositeComponent自定义组件实现了一套React生命周期和setState机制，因此自定义组件是在生命周期的环境中进行更新属性、内容和子节点的操作。这些操作与ReactDOMComponent的操作类似。
网友评论