从0到1实现一个虚拟DOM

web前端开发

共 7759字，需浏览 16分钟

· 2020-08-20

来源 | https://segmentfault.com/a/1190000021331850

要构建自己的虚拟 DOM，需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟 DOM 实现的源代码，因为它们是如此庞大和复杂——但实际上，虚拟 DOM 的主要部分只需不到 50 行代码。

有两个概念:

Virtual DOM 是真实 DOM 的映射
当虚拟 DOM 树中的某些节点改变时，会得到一个新的虚拟树。算法对这两棵树(新树和旧树)进行比较，找出差异，然后只需要在真实的 DOM 上做出相应的改变。

用 JS 对象模拟 DOM 树

首先，我们需要以某种方式将 DOM 树存储在内存中。可以使用普通的 JS 对象来做。假设我们有这样一棵树:

<ul class="”list”">    <li>item 1li>    <li>item 2li>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 文本节点

但是用这种方式表示内容很多的 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 1li>    <li>item 2li>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 1li>    <li>item 2li>ul>

它实际上告诉 Babel ‘ 嘿，小老弟帮我编译 JSX 语法，用 h(...) 函数代替 React.createElement(…)，然后 Babel 就开始编译。’

综上所述，我们将 DOM 写成这样:

/** @jsx h */ const a = (<ul className="”list”">    <li>item 1li>    <li>item 2li>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 class="list">        <li>item 1li>        <li>item 2li>    ul>);
const $root = document.getElementById("root");$root.appendChild(createElement(a));

比较两棵虚拟 DOM 树的差异

现在我们可以将虚拟 DOM 转换为真实的 DOM，这就需要考虑比较两棵 DOM 树的差异。基本的，我们需要一个算法来比较新的树和旧的树，它能够让我们知道什么地方改变了，然后相应的去改变真实的 DOM。

怎么比较 DOM 树？需要处理下面的情况：

添加新节点，使用 appendChild(…) 方法添加节点

移除老节点，使用 removeChild(…) 方法移除老的节点

节点的替换，使用 replaceChild(…) 方法

如果节点相同的——就需要需要深度比较子节点

编写一个名为 updateElement(…) 的函数，它接受三个参数—— $parent、newNode 和 oldNode，其中 \$parent 是虚拟节点的一个实际 DOM 元素的父元素。现在来看看如何处理上面描述的所有情况。

添加新节点

function updateElement($parent, newNode, oldNode) {    if (!oldNode) {        $parent.appendChild(createElement(newNode));    }}

移除老节点

这里遇到了一个问题——如果在新虚拟树的当前位置没有节点——我们应该从实际的 DOM 中删除它—— 这要如何做呢?

如果我们已知父元素(通过参数传递)，我们就能调用 $parent.removeChild(…) 方法把变化映射到真实的 DOM 上。但前提是我们得知道我们的节点在父元素上的索引，我们才能通过 \$parent.childNodes[index] 得到该节点的引用。

好的，让我们假设这个索引将被传递给 updateElement 函数(它确实会被传递——稍后将看到)。代码如下:

function updateElement($parent, newNode, oldNode, index = 0) {    if (!oldNode) {        $parent.appendChild(createElement(newNode));    } else if (!newNode) {        $parent.removeChild($parent.childNodes[index]);    }}

节点的替换

首先，需要编写一个函数来比较两个节点(旧节点和新节点)，并告诉节点是否真的发生了变化。还有需要考虑这个节点可以是元素或是文本节点:

function changed(node1, node2) {  return typeof node1 !== typeof node2 ||         typeof node1 === ‘string’ && node1 !== node2 ||         node1.type !== node2.type}

现在，当前的节点有了 index 属性，就可以很简单的用新节点替换它：

function updateElement($parent, newNode, oldNode, index = 0) {    if (!oldNode) {        $parent.appendChild(createElement(newNode));    } else if (!newNode) {        $parent.removeChild($parent.childNodes[index]);    } else if (changed(newNode, oldNode)) {        $parent.replaceChild(createElement(newNode), $parent.childNodes[index]);    }}

比较子节点

最后，但并非最不重要的是——我们应该遍历这两个节点的每一个子节点并比较它们——实际上为每个节点调用updateElement(…)方法，同样需要用到递归。

当节点是 DOM 元素时我们才需要比较( 文本节点没有子节点 )
我们需要传递当前的节点的引用作为父节点
我们应该一个一个的比较所有的子节点，即使它是 undefined 也没有关系，我们的函数也会正确处理它。
最后是 index，它是子数组中子节点的 index

function updateElement($parent, newNode, oldNode, index = 0) {    if (!oldNode) {        $parent.appendChild(createElement(newNode));    } else if (!newNode) {        $parent.removeChild($parent.childNodes[index]);    } else if (changed(newNode, oldNode)) {        $parent.replaceChild(createElement(newNode), $parent.childNodes[index]);    } else if (newNode.type) {        const newLength = newNode.children.length;        const oldLength = oldNode.children.length;        for (let i = 0; i < newLength || i < oldLength; i++) {            updateElement(                $parent.childNodes[index],                newNode.children[i],                oldNode.children[i],                i            );        }    }}

完整的代码

Babel+JSX
/*_ @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;}
function changed(node1, node2) {    return (        typeof node1 !== typeof node2 ||        (typeof node1 === "string" && node1 !== node2) ||        node1.type !== node2.type    );}
function updateElement($parent, newNode, oldNode, index = 0) {    if (!oldNode) {        $parent.appendChild(createElement(newNode));    } else if (!newNode) {        $parent.removeChild($parent.childNodes[index]);    } else if (changed(newNode, oldNode)) {        $parent.replaceChild(createElement(newNode), $parent.childNodes[index]);    } else if (newNode.type) {        const newLength = newNode.children.length;        const oldLength = oldNode.children.length;        for (let i = 0; i < newLength || i < oldLength; i++) {            updateElement(                $parent.childNodes[index],                newNode.children[i],                oldNode.children[i],                i            );        }    }}
// ---------------------------------------------------------------------
const a = (    <ul>        <li>item 1li>        <li>item 2li>    ul>);
const b = (    <ul>        <li>item 1li>        <li>hello!li>    ul>);
const $root = document.getElementById("root");const $reload = document.getElementById("reload");
updateElement($root, a);$reload.addEventListener("click", () => {    updateElement($root, b, a);});

HTML

<button id="reload">RELOADbutton><div id="root">div>

CSS

#root {    border: 1px solid black;    padding: 10px;    margin: 30px 0 0 0;}

打开开发者工具，并观察当按下“Reload”按钮时应用的更改。

总结

现在我们已经编写了虚拟 DOM 实现及了解它的工作原理。作者希望，在阅读了本文之后，对理解虚拟 DOM 如何工作的基本概念以及在幕后如何进行响应有一定的了解。

然而，这里有一些东西没有突出显示(将在以后的文章中介绍它们):

设置元素属性(props)并进行 diffing/updating
处理事件——向元素中添加事件监听
让虚拟 DOM 与组件一起工作，比如 React
获取对实际 DOM 节点的引用
使用带有库的虚拟 DOM，这些库可以直接改变真实的 DOM，比如 jQuery 及其插件

图片

表情

一个朋友

一个朋友，在深圳奋斗7年，和女友在去年合力在龙华买了一套房，总价600万，首付3成。但就在昨天，他们崩溃了。深圳推出可售型人才住房，就在他们新房附近，同样面积，总价不到400万，售价近乎腰斩。他们想不明白，同样是深圳人，买房人为什么都要被当成炒房客对待？二手房冰封，卖不出，新房不断打着，像极了上世纪

嵌入式Linux

老爸嘲讽我了，写破代码一年就挣十几万，他在工地带50个工人，一个月光人头费就3万，让我滚回去跟他干！

点击上方 "大数据肌肉猿"关注, 星标一起成长点击下方链接，进入高质量学习交流群今日更新| 1052个转型案例分享-大数据交流群来自：网络，侵删有个网友的父亲是做工程的，天天就嘲笑他，说他天天写着破代码有啥用，一年就拿个十多万的死工资，然后告诉他自己在工地里面带了50个工人，一个月能抽三万

程序源代码

测试新人，如何快速上手一个陌生的系统！

大家好，我是狂师！作为刚入行不久的测试新人，面对一个陌生的系统时，可能会感到有些手足无措。面对一个全新的系统系统，如何快速上手并展开有效的测试工作是一个重要的挑战。本文将探讨测试新人如何通过一系列步骤和策略，快速熟悉并掌握新系统的测试要点，从而提高测试效率和质量。本文旨在为测试新手提供一份指导，帮助

测试开发技术

Windows格式化对话框是一个使用了30年的 “临时解决方案”

戴夫-普卢默（Dave Plummer）是微软的资深工程师，曾创造了任务管理器、Windows 弹球、原生 ZIP 支持（微软出钱买断该功能后，他用这笔钱购买了一辆红色克尔维特）等传奇。近日他在自己的 X 账户上分享了创建 "格式化" 对话框的故事 —— 称其是一个使用了长达 30 年的 “临时解决

开源Linux

OpenAI的Sora竟然造假：生成的AI大片只有1%的AI，剩下的99%是人工！

点蓝色字关注“机器学习算法工程师”设为星标，干货直达！啊？Sora火爆短片《气球人》，也“造假”了？？？背后艺术家团队的最新揭秘，可谓一石激起千层浪：原来，视频画面并非完全由AI生成，其中有大量视觉效果需要人类后期实现。be like：这下网友不干了，合着大家伙儿跟OpenAI玩真心，OpenAI背

机器学习算法工程师

15种时间序列预测方法总结(包含多种方法代码实现)

向AI转型的程序员都关注了这个号👇👇👇在这篇文章中，我们将深入探讨时间序列预测的基本概念和方法。我们将首先介绍单元预测和多元预测的概念，然后详细介绍各种深度学习和传统机器学习方法如何应用于时间序列预测，包括循环神经网络（RNN）、一维卷积神经网络（1D-CNN）、Transformer、自回归模型（

机器学习AI算法工程

从原理到实践：掌握DPDK内存池技术

前言：本文整理下之前的学习笔记，基于DPDK17.11版本源码分析。主要分析一下内存管理部分代码。一、概述内存管理是数据面开发套件（DPDK）的一个核心部分，以此为基础，DPDK的其他部分和用户应用得以发挥其最佳性能。本系列文章将详细介绍DPDK提供的各种内存管理的功能。但在此之前，有必要先谈一谈为

开源Linux

一个神奇的 Linux命令——type

转自：科学随想录在Linux系统中，了解命令的类型、位置和完整路径对于系统管理和开发非常重要。type命令是一个强大而实用的工具，能够帮助我们查看给定命令的类型、位置和完整路径。在本文中，我们将深入探索type命令的用法和功能，并提供详细的代码示例和输出，以帮助读者全面了解该命令。第一部分：type

开源Linux

SpringBoot 实现图片防盗链功能

程序员的成长之路互联网/程序员/技术/资料共享关注阅读本文大概需要 4 分钟。来自：blog.csdn.net/weixin_46157208/article/details/138051737前言出于安全考虑，我们需要后端返回的图片只允许在某个网站内展示，不想被爬虫拿到图片地

程序员的成长之路

有意思！一个关于 Spring 历史的在线小游戏

发现 Spring One 的官网上有个好玩的彩蛋，分享给大家！进到Spring One的官网，可以看到右下角有个类似马里奥游戏中的金币图标。点击该金币之后，会打开一个新的页面，进入下面这样一个名为：The History Of Spring 的在线小游戏你可以使用上下左右的方向键来控制Spring

公众号程序猿DD