要构建自己的虚拟 DOM，需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟 DOM 实现的源代码，因为它们是如此庞大和复杂——但实际上，虚拟 DOM 的主要部分只需不到 50 行代码。
有两个概念:
- Virtual DOM 是真实 DOM 的映射；
- 当虚拟 DOM 树中的某些节点改变时，会得到一个新的虚拟树。算法对这两棵树(新树和旧树)进行比较，找出差异，然后只需要在真实的 DOM 上做出相应的改变。
用 JS 对象模拟 DOM 树
首先，我们需要以某种方式将 DOM 树存储在内存中。可以使用普通的 JS 对象来做。假设我们有这样一棵树：
<ul class=”list”> <li>item 1</li> <li>item 2</li> </ul>
看起来很简单，对吧? 如何用 JS 对象来表示呢?
{ type: ‘ul’, props: { ‘class’: ‘list’ }, children: [
{ type: ‘li’, props: {}, children: [‘item 1’] },
{ type: ‘li’, props: {}, children: [‘item 2’] }
] }
这里有两件事需要注意:
1. 用如下对象表示 DOM 元素
{ type: ‘…’, props: { … }, children: [ … ] }
2. 用普通 JS 字符串表示 DOM 文本节点
但是用这种方式表示内容很多的 Dom 树是相当困难的。这里来写一个辅助函数，这样更容易理解：
function h(type, props, …children) {
return { type, props, children };
}
用这个方法重新整理一开始代码：
h(‘ul’, { ‘class’: ‘list’ },
h(‘li’, {}, ‘item 1’),
h(‘li’, {}, ‘item 2’),
);
这样看起来简洁多了，还可以更进一步。这里使用 JSX，如下：
<ul className=”list”> <li>item 1</li> <li>item 2</li> </ul>
编译成：
React.createElement(‘ul’, { className: ‘list’ },
React.createElement(‘li’, {}, ‘item 1’),
React.createElement(‘li’, {}, ‘item 2’),
);
是不是看起来有点熟悉？如果能够用我们刚定义的 h(...) 函数代替 React.createElement(…)，那么我们也能使用 JSX 语法。其实，只需要在源文件头部加上这么一句注释：
/** @jsx h */ <ul className=”list”> <li>item 1</li> <li>item 2</li> </ul>
它实际上告诉 Babel ‘ 嘿，小老弟帮我编译 JSX 语法，用 h(...) 函数代替 React.createElement(…)，然后 Babel 就开始编译。’
综上所述，我们将 DOM 写成这样：
/** @jsx h */
const a = (
<ul className=”list”>
<li>item 1</li>
<li>item 2</li>
</ul>
);
Babel 会帮我们编译成这样的代码:
const a = (
h(‘ul’, { className: ‘list’ },
h(‘li’, {}, ‘item 1’),
h(‘li’, {}, ‘item 2’),
);
);
当函数 h 执行时，它将返回普通 JS 对象-即我们的虚拟 DOM:
const a = (
{ type: ‘ul’, props: { className: ‘list’ }, children: [
{ type: ‘li’, props: {}, children: [‘item 1’] },
{ type: ‘li’, props: {}, children: [‘item 2’] }
] }
);
从 Virtual DOM 映射到真实 DOM
好了，现在我们有了 DOM 树，用普通的 JS 对象表示，还有我们自己的结构。这很酷，但我们需要从它创建一个真正的 DOM。
首先让我们做一些假设并声明一些术语:
- 使用以’
$‘开头的变量表示真正的 DOM 节点(元素，文本节点)，因此 $parent 将会是一个真实的 DOM 元素 - 虚拟 DOM 使用名为
node的变量表示
* 就像在 React 中一样，只能有一个根节点——所有其他节点都在其中
那么，来编写一个函数 createElement(…)，它将获取一个虚拟 DOM 节点并返回一个真实的 DOM 节点。这里先不考虑 props 和 children 属性：
function createElement(node) {
if (typeof node === ‘string’) {
return document.createTextNode(node);
}
return document.createElement(node.type);
}
上述方法我也可以创建有两种节点分别是文本节点和 Dom 元素节点，它们是类型为的 JS 对象：
{ type: ‘…’, props: { … }, children: [ … ] }
因此，可以在函数 createElement 传入虚拟文本节点和虚拟元素节点——这是可行的。
现在让我们考虑子节点——它们中的每一个都是文本节点或元素。所以它们也可以用 createElement() 函数创建。是的，这就像递归一样，所以我们可以为每个元素的子元素调用 createElement()，然后使用 appendChild() 添加到我们的元素中:
function createElement(node) {
if (typeof node === ‘string’) {
return document.createTextNode(node);
}
const $el = document.createElement(node.type);
node.children
.map(createElement)
.forEach($el.appendChild.bind($el));
return $el;
}
哇，看起来不错。先把节点 props 属性放到一边。待会再谈。我们不需要它们来理解虚拟 DOM 的基本概念，因为它们会增加复杂性。
完整代码如下：
/** @jsx h */
function h(type, props, ...children) {
return { type, props, children };
}
function createElement(node) {
if (typeof node === 'string') {
return document.createTextNode(node);
}
const $el = document.createElement(node.type);
node.children
.map(createElement)
.forEach($el.appendChild.bind($el));
return $el;
}
const a = (
<ul >
<li>item 1</li>
<li>item 2</li>
</ul>
);
const $root = document.getElementById('root');
$root.appendChild(createElement(a));
比较两棵虚拟 DOM 树的差异
现在我们可以将虚拟 DOM 转换为真实的 DOM，这就需要考虑比较两棵 DOM 树的差异。基本的，我们需要一个算法来比较新的树和旧的树，它能够让我们知道什么地方改变了，然后相应的去改变真实的 DOM。
怎么比较 DOM 树？需要处理下面的情况：
- 添加新节点，使用
appendChild()方法添加节点