前沿技术解密——Virtual DOM

╰半橙微兮° 2022-06-15 12:08 170阅读 0赞

> 作为`React`的核心技术之一`Virtual DOM`，一直披着神秘的面纱。
> 
> 实际上，Virtual DOM包含：  
> 1. [JavaScript][] DOM模型树（VTree），类似文档节点树（DOM）  
> 2. DOM模型树转节点树方法（VTree -> DOM）  
> 3. 两个DOM模型树的差异[算法][Link 1]（diff(VTree, VTree) -> PatchObject）  
> 4. 根据差异操作节点方法（patch(DOMNode, PatchObject) -> DOMNode）
> 
> 接下来我们分别探讨这几个部分：

### VTree ###

VTree模型非常简单，基本结构如下：

{
        // tag的名字
        tagName: 'p',
        // 节点包含属性
        properties: {
            style: {
                color: '#fff'
            }
        },
        // 子节点
        children: [],
        // 该节点的唯一表示，后面会讲有啥用
        key: 1
    }

所以我们很容易写一个方法来创建这种树状结构，例如React是这么创建的：

// 创建一个div
    react.createElement('div', null, [
        // 子节点img
        react.createElement('img', { src: "avatar.png", class: "profile" }),
        // 子节点h3
        react.createElement('h3', null, [[user.firstName, user.lastName].join(' ')])
    ]);

### VTree -> DOM ###

这方法也不太难，我们实现一个简单的：

### diff(VTree, VTree) -> PatchObject ###

差异算法是Virtual DOM的核心，实际上该差异算法是个取巧算法（当然你不能指望用O(n^3)的复杂度来解决两个树的差异问题吧），不过能解决Web的大部分问题。

那么React是如何取巧的呢？

*  分层对比

[![687474703a2f2f3774737a6b792e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f466871304748634e4f4f6d517a4f61746c6f636a69756d6e66686953][]][687474703a2f2f3774737a6b792e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f466871304748634e4f4f6d517a4f61746c6f636a69756d6e66686953]

如图，React仅仅对同一层的节点尝试匹配，因为实际上，Web中不太可能把一个Component在不同层中移动。

*  基于key来匹配

还记得之前在VTree中的属性有一个叫key的东东么？这个是一个VNode的唯一识别，用于对两个不同的VTree中的VNode做匹配的。

[![687474703a2f2f3774737a6b792e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f46724b7633764965474d36506570445f674e42437251527073487474][]][687474703a2f2f3774737a6b792e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f46724b7633764965474d36506570445f674e42437251527073487474]

这也很好理解，因为我们经常会在Web遇到拥有唯一识别的Component（例如课程卡片、用户卡片等等）的不同排列问题。

*  基于自定义元素做优化

React提供自定义元素，所以匹配更加简单。

[![687474703a2f2f3774737a6b792e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f466d45697742416c7a44316750357536525a473168303364496a4238][]][687474703a2f2f3774737a6b792e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f466d45697742416c7a44316750357536525a473168303364496a4238]

### patch(DOMNode, PatchObject) -> DOMNode ###

由于diff操作已经找出两个VTree不同的地方，只要根据计算出来的结果，我们就可以对DOM的进行差异渲染。

[JavaScript]: http://lib.csdn.net/base/javascript
[Link 1]: http://lib.csdn.net/base/datastructure
[687474703a2f2f3774737a6b792e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f466871304748634e4f4f6d517a4f61746c6f636a69756d6e66686953]: https://camo.githubusercontent.com/ba4c8c65fab628d2d9a43d0f92e6e7ae06e37a46/687474703a2f2f3774737a6b792e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f466871304748634e4f4f6d517a4f61746c6f636a69756d6e66686953
[687474703a2f2f3774737a6b792e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f46724b7633764965474d36506570445f674e42437251527073487474]: https://camo.githubusercontent.com/1f21aee5fc403d22118da79277824f8de68025ce/687474703a2f2f3774737a6b792e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f46724b7633764965474d36506570445f674e42437251527073487474
[687474703a2f2f3774737a6b792e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f466d45697742416c7a44316750357536525a473168303364496a4238]: https://camo.githubusercontent.com/87d5667aa1d62e15f686b413cb98ce473b5338cc/687474703a2f2f3774737a6b792e636f6d312e7a302e676c622e636c6f7564646e2e636f6d2f466d45697742416c7a44316750357536525a473168303364496a4238