深度剖析：如何实现一个 Virtual DOM 算法

梦里梦外; 2022-04-17 02:41 160阅读 0赞

**作者**：戴嘉华  
**转载 [https://github.com/livoras/blog/issues/13][https_github.com_livoras_blog_issues_13]**

break
      default:
        throw new Error('Unknown patch type ' + currentPatch.type)
    }

\})  
\}

完整代码可见 [patch.js](https://github.com/livoras/simple-virtual-dom/blob/master/lib/patch.js)。
    
    ## 5 结语
    
    Virtual DOM 算法主要是实现上面步骤的三个函数：[element](https://github.com/livoras/simple-virtual-dom/blob/master/lib/element.js)，[diff](https://github.com/livoras/simple-virtual-dom/blob/master/lib/diff.js)，[patch](https://github.com/livoras/simple-virtual-dom/blob/master/lib/patch.js)。然后就可以实际的进行使用：
    
    ```source-js
    // 1\. 构建虚拟DOM
    var tree = el('div', {'id': 'container'}, [
        el('h1', {style: 'color: blue'}, ['simple virtal dom']),
        el('p', ['Hello, virtual-dom']),
        el('ul', [el('li')])
    ])
    
    // 2\. 通过虚拟DOM构建真正的DOM
    var root = tree.render()
    document.body.appendChild(root)
    
    // 3\. 生成新的虚拟DOM
    var newTree = el('div', {'id': 'container'}, [
        el('h1', {style: 'color: red'}, ['simple virtal dom']),
        el('p', ['Hello, virtual-dom']),
        el('ul', [el('li'), el('li')])
    ])
    
    // 4\. 比较两棵虚拟DOM树的不同
    var patches = diff(tree, newTree)
    
    // 5\. 在真正的DOM元素上应用变更
    patch(root, patches)

当然这是非常粗糙的实践，实际中还需要处理事件监听等；生成虚拟 DOM 的时候也可以加入 JSX 语法。这些事情都做了的话，就可以构造一个简单的ReactJS了。  
  
本文所实现的完整代码存放在 [Github][]，仅供学习。

## 6 References ##

[https_github.com_livoras_blog_issues_13]: https://github.com/livoras/blog/issues/13
[Github]: https://github.com/livoras/simple-virtual-dom