从零开始，手写一个简易的Virtual DOM

[xingbofeng]

众所周知，对前端而言，直接操作 DOM 是一件及其耗费性能的事情，以 React 和 Vue 为代表的众多框架普遍采用 Virtual DOM 来解决如今愈发复杂 Web 应用中状态频繁发生变化导致的频繁更新 DOM 的性能问题。本文为笔者通过实际操作，实现了一个非常简单的 Virtual DOM ，加深对现今主流前端框架中 Virtual DOM 的理解。

关于 Virtual DOM ，社区已经有许多优秀的文章，而本文是笔者采用自己的方式，并有所借鉴前辈们的实现，以浅显易懂的方式，对 Virtual DOM 进行简单实现，但不包含snabbdom的源码分析，在笔者的最终实现里，参考了snabbdom的原理，将本文的Virtual DOM实现进行了改进，感兴趣的读者可以阅读上面几篇文章，并参考笔者本文的最终代码进行阅读。

本文阅读时间约15~20分钟。

概述

本文分为以下几个方面来讲述极简版本的 Virtual DOM 核心实现：

• Virtual DOM 主要思想
• 用 JavaScript 对象表示 DOM 树
• 将 Virtual DOM 转换为真实 DOM
  • 设置节点的类型
  • 设置节点的属性
  • 对子节点的处理
• 处理变化
  • 新增与删除节点
  • 更新节点
  • 更新子节点

Virtual DOM 主要思想

要理解 Virtual DOM 的含义，首先需要理解 DOM ，DOM 是针对 HTML 文档和 XML 文档的一个 API ， DOM 描绘了一个层次化的节点树，通过调用 DOM API，开发人员可以任意添加，移除和修改页面的某一部分。而 Virtual DOM 则是用 JavaScript 对象来对 Virtual DOM 进行抽象化的描述。Virtual DOM 的本质是JavaScript对象，通过 Render函数，可以将 Virtual DOM 树 映射为 真实 DOM 树。

一旦 Virtual DOM 发生改变，会生成新的 Virtual DOM ，相关算法会对比新旧两颗 Virtual DOM 树，并找到他们之间的不同，尽可能地通过最少的 DOM 操作来更新真实 DOM 树。

我们可以这么表示 Virtual DOM 与 DOM 的关系：DOM = Render(Virtual DOM)。

用 JavaScript 对象表示 DOM 树

Virtual DOM 是用 JavaScript 对象表示，并存储在内存中的。主流的框架均支持使用 JSX 的写法， JSX 最终会被 babel 编译为JavaScript 对象，用于来表示Virtual DOM，思考下列的 JSX：

<div>
    <span className="item">item</span>
    <input disabled={true} />
</div>

最终会被babel编译为如下的 JavaScript对象：

{
    type: 'div',
    props: null,
    children: [{
        type: 'span',
        props: {
            class: 'item',
        },
        children: ['item'],
    }, {
        type: 'input',
        props: {
            disabled: true,
        },
        children: [],
    }],
}

我们可以注意到以下两点：

• 所有的 DOM 节点都是一个类似于这样的对象：

{ type: '...', props: { ... }, children: { ... }, on: { ... } }

• 本文节点是用 JavaScript 字符串来表示

那么 JSX 又是如何转化为 JavaScript 对象的呢。幸运的是，社区有许许多多优秀的工具帮助我们完成了这件事，由于篇幅有限，本文对这个问题暂时不做探讨。为了方便大家更快速地理解 Virtual DOM ，对于这一个步骤，笔者使用了开源工具来完成。著名的 babel 插件babel-plugin-transform-react-jsx帮助我们完成这项工作。

为了更好地使用babel-plugin-transform-react-jsx，我们需要搭建一下webpack开发环境。具体过程这里不做阐述，有兴趣自己实现的同学可以到simple-virtual-dom查看代码。

对于不使用 JSX 语法的同学，可以不配置babel-plugin-transform-react-jsx，通过我们的vdom函数创建 Virtual DOM：

function vdom(type, props, ...children) {
    return {
        type,
        props,
        children,
    };
}

然后我们可以通过如下代码创建我们的 Virtual DOM 树：

const vNode = vdom('div', null,
    vdom('span', { class: 'item' }, 'item'),
    vdom('input', { disabled: true })
);

在控制台输入上述代码，可以看到，已经创建好了用 JavaScript对象表示的 Virtual DOM 树：

将 Virtual DOM 转换为真实 DOM

现在我们知道了如何用 JavaScript对象 来代表我们的真实 DOM 树，那么， Virtual DOM 又是怎么转换为真实 DOM 给我们呈现的呢？

在这之前，我们要先知道几项注意事项：

• 在代码中，笔者将以$开头的变量来表示真实 DOM 对象；
• toRealDom函数接受一个 Virtual DOM 对象为参数，将返回一个真实 DOM 对象；
• mount函数接受两个参数：将挂载 Virtual DOM 对象的父节点，这是一个真实 DOM 对象，命名为$parent；以及被挂载的 Virtual DOM 对象vNode；

下面是toRealDom的函数原型：

function toRealDom(vNode) {
    let $dom;
    // do something with vNode
    return $dom;
}

通过toRealDom方法，我们可以将一个vNode对象转化为一个真实 DOM 对象，而mount函数通过appendChild，将真实 DOM 挂载：

function mount($parent, vNode) {
    return $parent.appendChild(toRealDom(vNode));
}

下面，让我们来分别处理vNode的type、props和children。

设置节点的类型

首先，因为我们同时具有字符类型的文本节点和对象类型的element节点，需要对type做单独的处理：

if (typeof vNode === 'string') {
    $dom = document.createTextNode(vNode);
} else {
    $dom = document.createElement(vNode.type);
}

在这样一个简单的toRealDom函数中，对type的处理就完成了，接下来让我们看看对props的处理。

设置节点的属性

我们知道，如果节点有props，那么props是一个对象。通过遍历props，调用setProp方法，对每一类props单独处理。

if (vNode.props) {
    Object.keys(vNode.props).forEach(key => {
        setProp($dom, key, vNode.props[key]);
    });
}

setProp接受三个参数：

• $target，这是一个真实 DOM 对象，setProp将对这个节点进行 DOM 操作；
• name，表示属性名；
• value，表示属性的值；

读到这里，相信你已经大概清楚setProp需要做什么了，一般情况下，对于普通的props，我们会通过setAttribute给 DOM 对象附加属性。

function setProp($target, name, value) {
    return $target.setAttribute(name, value);
}

但这远远不够，思考下列的 JSX 结构：

<div>
    <span className="item" data-node="item" onClick={() => console.log('item')}>item</span>
    <input disabled={true} />
</div>

从上面的 JSX 结构中，我们发现以下几点：

• 由于class是 JavaScript 的保留字， JSX 一般使用className来表示 DOM 节点所属的class；
• 一般以on开头的属性来表示事件；
• 除字符类型外，属性还可能是布尔值，如disabled，当该值为true时，则添加这一属性；

所以，setProp也同样需要考虑上述情况：

function isEventProp(name) {
    return /^on/.test(name);
}

function extractEventName(name) {
    return name.slice(2).toLowerCase();
}

function setProp($target, name, value) {
    if (name === 'className') { // 因为class是保留字，JSX使用className来表示节点的class
        return $target.setAttribute('class', value);
    } else if (isEventProp(name)) { // 针对 on 开头的属性，为事件
        return $target.addEventListener(extractEventName(name), value);
    } else if (typeof value === 'boolean') { // 兼容属性为布尔值的情况
        if (value) {
            $target.setAttribute(name, value);
        }
        return $target[name] = value;
    } else {
        return $target.setAttribute(name, value);
    }
}

最后，还有一类属性是我们的自定义属性，例如主流框架中的组件间的状态传递，即通过props来进行传递的，我们并不希望这一类属性显示在 DOM 中，因此需要编写一个函数isCustomProp来检查这个属性是否是自定义属性，因为本文只是为了实现 Virtual DOM 的核心思想，为了方便，在本文中，这个函数直接返回false。

function isCustomProp(name) {
    return false;
}

最终的setProp函数：

function setProp($target, name, value) {
    if (isCustomProp(name)) {
        return;
    } else if (name === 'className') { // fix react className
        return $target.setAttribute('class', value);
    } else if (isEventProp(name)) {
        return $target.addEventListener(extractEventName(name), value);
    } else if (typeof value === 'boolean') {
        if (value) {
            $target.setAttribute(name, value);
        }
        return $target[name] = value;
    } else {
        return $target.setAttribute(name, value);
    }
}

对子节点的处理

对于children里的每一项，都是一个vNode对象，在进行 Virtual DOM 转化为真实 DOM 时，子节点也需要被递归转化，可以想到，针对有子节点的情况，需要对子节点以此递归调用toRealDom，如下代码所示：

if (vNode.children && vNode.children.length) {
    vNode.children.forEach(childVdom => {
        const realChildDom = toRealDom(childVdom);
        $dom.appendChild(realChildDom);
    });
}

最终完成的toRealDom如下：

function toRealDom(vNode) {
    let $dom;
    if (typeof vNode === 'string') {
        $dom = document.createTextNode(vNode);
    } else {
        $dom = document.createElement(vNode.type);
    }

    if (vNode.props) {
        Object.keys(vNode.props).forEach(key => {
            setProp($dom, key, vNode.props[key]);
        });
    }

    if (vNode.children && vNode.children.length) {
        vNode.children.forEach(childVdom => {
            const realChildDom = toRealDom(childVdom);
            $dom.appendChild(realChildDom);
        });
    }

    return $dom;
}

处理变化

Virtual DOM 之所以被创造出来，最根本的原因是性能提升，通过 Virtual DOM ，开发者可以减少许多不必要的 DOM 操作，以达到最优性能，那么下面我们来看看 Virtual DOM 算法 是如何通过对比更新前的 Virtual DOM 树和更新后的 Virtual DOM 树来实现性能优化的。

注：本文是笔者的最简单实现，目前社区普遍通用的算法是snabbdom，如 Vue 则是借鉴该算法实现的 Virtual DOM ，有兴趣的读者可以查看这个库的源代码，基于本文的 Virtual DOM 的小示例，笔者最终也参考了该算法实现，本文demo传送门，由于篇幅有限，感兴趣的读者可以自行研究。

为了处理变化，首先声明一个updateDom函数，这个函数接受以下四个参数：

• $parent，表示将被挂载的父节点；
• oldVNode，旧的VNode对象；
• newVNode，新的VNode对象；
• index，在更新子节点时使用，表示当前更新第几个子节点，默认为0；

函数原型如下：

function updateDom($parent, oldVNode, newVNode, index = 0) {

}

新增与删除节点

首先我们来看新增一个节点的情况，对于原本没有该节点，需要添加新的一个节点到 DOM 树中，我们需要通过appendChild来实现：

转化为代码表述为：

// 没有旧的节点，添加新的节点
if (!oldVNode) {
    return $parent.appendChild(toRealDom(newVNode));
}

同理，对于删除一个旧节点的情况，我们通过removeChild来实现，在这里，我们应该从真实 DOM 中将旧的节点删掉，但问题是在这个函数中是直接取不到这一个节点的，我们需要知道这个节点在父节点中的位置，事实上，可以通过$parent.childNodes[index]来取到，这便是上面提到的为何需要传入index，它表示当前更新的节点在父节点中的索引：

转化为代码表述为：

const $currentDom = $parent.childNodes[index];

// 没有新的节点，删除旧的节点
if (!newVNode) {
    return $parent.removeChild($currentDom);
}

更新节点

Virtual DOM 的核心在于如何高效更新节点，下面我们来看看更新节点的情况。

首先，针对文本节点，我们可以简单处理，对于文本节点是否发生改变，只需要通过比较其新旧字符串是否相等即可，如果是相同的文本节点，是不需要我们更新 DOM 的，在updateDom函数中，直接return即可：

// 都是文本节点，都没有发生变化
if (typeof oldVNode === 'string' && typeof newVNode === 'string' && oldVNode === newVNode) {
    return;
}

接下来，考虑节点是否真的需要更新，如图所示，一个节点的类型从span换成了div，显而易见，这是一定需要我们去更新DOM的：

我们需要编写一个函数isNodeChanged来帮助我们判断旧节点和新节点是否真的一致，如果不一致，需要我们把节点进行替换：

function isNodeChanged(oldVNode, newVNode) {
    // 一个是textNode，一个是element，一定改变
    if (typeof oldVNode !== typeof newVNode) {
        return true;
    }

    // 都是textNode，比较文本是否改变
    if (typeof oldVNode === 'string' && typeof newVNode === 'string') {
        return oldVNode !== newVNode;
    }

    // 都是element节点，比较节点类型是否改变
    if (typeof oldVNode === 'object' && typeof newVNode === 'object') {
        return oldVNode.type !== newVNode.type;
    }
}

在updateDom中，发现节点类型发生变化，则将该节点直接替换，如下代码所示，通过调用replaceChild，将旧的 DOM 节点移除，并将新的 DOM 节点加入：

if (isNodeChanged(oldVNode, newVNode)) {
    return $parent.replaceChild(toRealDom(newVNode), $currentDom);
}

但这远远还没有结束，考虑下面这种情况：

<!-- old -->
<div class="item" data-item="old-item"></div>

<!-- new -->
<div id="item" data-item="new-item"></div>

对比上面的新旧两个节点，发现节点类型并没有发生改变，即VNode.type都是'div'，但是节点的属性却发生了改变，除了针对节点类型的变化更新 DOM 外，针对节点的属性的改变，也需要对应把 DOM 更新。

与上述方法类似，我们编写一个isPropsChanged函数，来判断新旧两个节点的属性是否有发生变化：

function isPropsChanged(oldProps, newProps) {
    // 类型都不一致，props肯定发生变化了
    if (typeof oldProps !== typeof newProps) {
        return true;
    }

    // props为对象
    if (typeof oldProps === 'object' && typeof newProps === 'object') {
        const oldKeys = Object.keys(oldProps);
        const newkeys = Object.keys(newProps);
        // props的个数都不一样，一定发生了变化
        if (oldKeys.length !== newkeys.length) {
            return true;
        }
        // props的个数相同的情况，遍历props，看是否有不一致的props
        for (let i = 0; i < oldKeys.length; i++) {
            const key = oldKeys[i]
            if (oldProps[key] !== newProps[key]) {
                return true;
            }
        }
        // 默认未改变
        return false;
    }

    return false;
}

因为当节点没有任何属性时，props为null，isPropsChanged首先判断新旧两个节点的props是否是同一类型，即是否存在旧节点的props为null，新节点有新的属性，或者反之：新节点的props为null，旧节点的属性被删除了。如果类型不一致，那么属性一定是被更新的。

接下来，考虑到节点在更新前后都有props的情况，我们需要判断更新前后的props是否一致，即两个对象是否全等，遍历即可。如果有不相等的属性，则认为props发生改变，需要处理props的变化。

现在，让我们回到我们的updateDom函数，看看是把Virtual DOM 节点props的更新应用到真实 DOM 上的。

// 虚拟DOM的type未改变，对比节点的props是否改变
const oldProps = oldVNode.props || {};
const newProps = newVNode.props || {};
if (isPropsChanged(oldProps, newProps)) {
    const oldPropsKeys = Object.keys(oldProps);
    const newPropsKeys = Object.keys(newProps);

    // 如果新节点没有属性，把旧的节点的属性清除掉
    if (newPropsKeys.length === 0) {
        oldPropsKeys.forEach(propKey => {
            removeProp($currentDom, propKey, oldProps[propKey]);
        });
    } else {
        // 拿到所有的props，以此遍历，增加/删除/修改对应属性
        const allPropsKeys = new Set([...oldPropsKeys, ... newPropsKeys]);
        allPropsKeys.forEach(propKey => {
            // 属性被去除了
            if (!newProps[propKey]) {
                return removeProp($currentDom, propKey, oldProps[propKey]);
            }
            // 属性改变了/增加了
            if (newProps[propKey] !== oldProps[propKey]) {
                return setProp($currentDom, propKey, newProps[propKey]);
            }
        });
    }
}

上面的代码也非常好理解，如果发现props改变了，那么对旧的props的每项去做遍历。把不存在的属性清除，再把新增加的属性加入到更新后的 DOM 树中：

• 首先，如果新的节点没有属性，遍历删除所有旧的节点的属性，在这里，我们通过调用removeProp删除。removeProp与setProp相对应，由于本文篇幅有限，笔者在这里就不做过多阐述；

function removeProp($target, name, value) {
    if (isCustomProp(name)) {
        return;
    } else if (name === 'className') { // fix react className
        return $target.removeAttribute('class');
    } else if (isEventProp(name)) {
        return $target.removeEventListener(extractEventName(name), value);
    } else if (typeof value === 'boolean') {
        $target.removeAttribute(name);
        $target[name] = false;
    } else {
        $target.removeAttribute(name);
    }
}

• 如果新节点有属性，那么拿到旧节点和新节点所有属性，遍历新旧节点的所有属性，如果属性在新节点中没有，那么说明该属性被删除了。如果新的节点与旧的节点属性不一致/或者是新增的属性，则调用setProp给真实 DOM 节点添加新的属性。

更新子节点

在最后，与toRealDom类似的是，在updateDom中，我们也应当处理所有子节点，对子节点进行递归调用updateDom，一个一个对比所有子节点的VNode是否有更新，一旦VNode有更新，则真实 DOM 也需要重新渲染：

// 根节点相同，但子节点不同，要递归对比子节点
if (
    (oldNode.children && oldNode.children.length) ||
    (newNode.children && newNode.children.length)
) {
    for (let i = 0; i < oldNode.children.length || i < newNode.children.length; i++) {
        updateDom($currentDom, oldNode.children[i], newNode.children[i], i);
    }
}

远远没有结束

以上是笔者实现的最简单的 Virtual DOM 代码，但这与社区我们所用到 Virtual DOM 算法是有天壤之别的，笔者在这里举个最简单的例子：

<!-- old -->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<!-- new -->
<ul>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

对于上述代码中实现的updateDom函数而言，更新前后的 DOM 结构如上所示，则会触发五个li节点全部重新渲染，这显然是一种性能的浪费。而snabbdom则通过移动节点的方式较好地解决了上述问题，由于本文篇幅有限，并且社区也有许多对该 Virtual DOM 算法的分析文章，笔者就不在本文做过多阐述了，有兴趣的读者可以到自行研究。笔者也基于本文实例，参考snabbdom算法实现了最终的版本，有兴趣的读者可以查看本文示例最终版