构建一个虚拟 DOM

本文已整理到 Github，地址 👉 blog。

如果我的内容帮助到了您，欢迎点个 Star 🎉🎉🎉 鼓励鼓励 :) ~~

我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。

---

本文译自 How to write your own Virtual DOM，为了更好的理解 Virtual DOM 的基本概念，不增加其复杂性，它并没有设置 props、处理事件等，如果想要了解这些内容，可以查看第二部分 Write your Virtual DOM 2: Props & Events。

构建自己的虚拟 DOM 需要了解两件事。

• 虚拟 DOM 是真实 DOM 的任何一种表示形式
• 当我们在虚拟 DOM 树中更改某些内容时，我们会得到一个新的虚拟树。算法比较这两种树(旧树和新树)，找出差异，并且只对真实 DOM 进行必要的小改动，以反映虚拟 DOM。

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'] }
  ]
}

在这里你可以注意到两件事：

• 我们用如下对象表示 DOM 元素

{ type: '...', props: { ... }, children: [ ... ] }

• 我们用纯 JS 字符串表示 DOM 文本节点

但以这种方式书写大树是相当困难的。所以我们需要编写一个辅助函数，这样我们就可以更容易理解它的结构：

function h(type, props, ...children) {
  return { type, props, children }
}

现在我们可以这样编写 DOM 树：