本文已整理到 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 树: