React虚拟DOM

写在前面

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

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

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

虚拟DOM构成

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

相同处

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

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

不同处

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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。