1.简介
虚拟DOM主要包括
- Virtual DOM模型
- 生命周期的维护和管理
- 性能高效的diff算法
- 将虚拟DOM转化为原声DOM的Patch方法
所有的DOM树都是通过虚拟DOM构造的，当数据更新时，会通过diff算法对比新的虚拟DOM和上一个虚拟DOM，需找到需要变更的DOM节点，只对变化的真实DOM节点进行更新操作，而不是重新渲染整个DOM树。
同时，还实现了虚拟DOM的批量操作，在操作虚拟DOM时，并不会马上生成真实的DOM，而是将一个事件循环中的两次数据进行合并，在事件循环结束时才去根据虚拟DOM去操作真实DOM。例如，连续调用两次setState改变组件内状态，并不会直接去改变真实DOM，而是将这两次的改变合并后，再去操作真实DOM。
因此，每次更新数据时重新生成的只是虚拟DOM，对原生DOM进行操作的只是diff部分，可以达到提高效率的目的。同时，开发者也不用关系数据的变更是怎么更新到真实DOM上的，这一层绑定已经由React帮你做了。
2.Virtual DOM模型
虚拟DOM模型主要负责虚拟DOM的增删改查，并能代表真实DOM的所有属性数据。
2.1 创建一个虚拟DOM
虚拟DOM因为后面要转化为真实DOM，它需要具备的属性有：
- 标签名
- 节点属性
- 子节点
- 标识id
我们创建一个组件时，都是用的JSX语法糖，其实它会被编译成调用React中的createElement方法，createElement部分代码如下：
ReactElement.createElement = function(type, config, children) {
var propName;
// Reserved names are extracted
var props = {};
var key = null;
var ref = null;
var self = null;
var source = null;
//提取出节点属性中的ref, key, self, source等比较特殊的属性
if (config != null) {
if (hasValidRef(config)) {
ref = config.ref;
}
if (hasValidKey(config)) {
key = '' + config.key;
}
self = config.__self === undefined ? null : config.__self;
source = config.__source === undefined ? null : config.__source;
//将节点属性赋给props
for (propName in config) {
if (
hasOwnProperty.call(config, propName) &&
!RESERVED_PROPS.hasOwnProperty(propName)
) {
props[propName] = config[propName];
}
}
}
//将第三个参数及其之后的参数判断为子节点将其赋给children，子节点个数大于一时将其封装成一个数组
var childrenLength = arguments.length - 2;
if (childrenLength === 1) {
props.children = children;
} else if (childrenLength > 1) {
var childArray = Array(childrenLength);
for (var i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
if (__DEV__) {
if (Object.freeze) {
Object.freeze(childArray);
}
}
props.children = childArray;
}
//如果自定义组件有默认属性，则将其赋给props
if (type && type.defaultProps) {
var defaultProps = type.defaultProps;
for (propName in defaultProps) {
if (props[propName] === undefined) {
props[propName] = defaultProps[propName];
}
}
}
if (__DEV__) {
if (key || ref) {
if (
typeof props.$$typeof === 'undefined' ||
props.$$typeof !== REACT_ELEMENT_TYPE
) {
var displayName = typeof type === 'function'
? type.displayName || type.name || 'Unknown'
: type;
if (key) {
defineKeyPropWarningGetter(props, displayName);
}
if (ref) {
defineRefPropWarningGetter(props, displayName);
}
}
}
}
//调用ReactElement构造函数，创建出虚拟DOM
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props,
);
};
2.2 初始化组件
用React创建组件时，会通过type类型来区分创建不同的组件
- type为空时，创建空组件
- type为对象时，创建DOM标签组件或自定义组件
DOM标签组件即是原生DOM标签，在挂载组件时，首先会生成标签，如果存在时间，则针对当前节点添加事件代理；如果存在样式，则会对样式进行合并操作；创建其属性和唯一标识
在更新属性时，首先会删除不需要的旧属性，然后更新新属性。
在卸载组件时，会卸载子节点，清楚事件监听，清空标识等。 - type为字符串或数字时，创建文本组件
文本组件也有自己的唯一标识，也能进行虚拟DOMdiff计算，并且不会为文本内容包裹上span标签
