写在前面

这一节实际上很靠后才整理的。

主要整理的动机是自己看完很多源码后进行消化、重构整体知识体系时候，看到<<深入React技术栈>>源码分析里面关于虚拟DOM这块以后，对这个部分强化了个人对这块的体系认知之后的整理。

这里主要是宏观体系层次的整理，不太涉及细节。

虚拟DOM构成

虚拟DOM是一棵树，从根节点一直向下生长，它有很多节点，这些节点有相同，也有不同。

相同处

各个节点都会有以下基础属性：

标签名
节点属性: style|attr|event
children
key

不同处

React虚拟DOM的节点统称React Node, 包含三中类型的节点，ReactElement、ReactFragment、ReactText。这其中ReactElement包含ReactComponentElement & ReactDomElement。这里直接用一下<<深入React技术栈>>里面的一个集合定义，个人看到的时候有点恍然大悟的感觉。

type ReactNode = ReactElement | ReactFragment | ReactText;

type ReactElement = ReactComponentElement | ReactDOMElement;

type ReactDOMElement = { 
  type : string, 
  props : { 
    children : ReactNodeList, 
    className : string, 
    etc.
  }, 
  key : string | boolean | number | null, 
  ref : string | null 
};

type ReactComponentElement<TProps> = { 
  type : ReactClass<TProps>, 
  props : TProps, 
  key : string | boolean | number | null, 
  ref : string | null 
};

type ReactFragment = Array<ReactNode | ReactEmpty>;

type ReactNodeList = ReactNode | ReactEmpty;

type ReactText = string | number;

type ReactEmpty = null | undefined | boolean;

结构

入口

入口虚拟DOM节点创建是有分支处理的，上面已经提到了不同类型的节点，这里有创建入口，它会根据情况调用不同的方法创建不同类型的节点，关键文件是instantiateReactComponent.js

这里之前有过分析，直接跳转。 Go

ReactDomElement

实际上就是ReactDomComponent实例。

这里也有分析。直接跳转。 Go

ReactComponentElement

实际上就是ReacCompositeComponent实例。

这里也有分析。直接跳转。 Go

文本节点

文本本质上不算节点，但是React内部为了渲染一致，还是讲起封装成了文本组件ReactDOMTextComponent。通过这个封装，文本也可以实现Diff。