React虚拟DOM分析

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标签