zoux / virtual-dom

💻 Virtual Dom 的原理解析以及简单实现

Virtual Dom

便于了解 Virtual Dom 原理的简单实现。

实现原理

Virtual Dom 算法的实现主要是以下三步：

1. 通过 JS 来模拟创建 DOM 对象

2. 判断两个对象的差异

• 树的递归：

1. 没有新的节点，那么什么都不用做
2. 新的节点的 tagName 和 key（可能都没有）和旧的相同，开始遍历子树
3. 新的节点的 tagName 和 key 和旧的不同，就替换节点

• 判断属性的更改：

1. 遍历 oldProps 查看是否有属性值被删除
2. 遍历 newProps 查看是否有属性值被修改
3. 在第二步中同时查看是否有属性新增

• 遍历子树：

1. 判断新旧子树差异
2. 给节点打上标记

• 判断子树的差异：

1. 遍历旧的节点列表，查看每个节点是否还存在于新的节点列表中
2. 遍历新的节点列表，判断是否有新的节点
3. 在第二步中同时判断节点是否有移动

3. 渲染差异

在 vue / react 中的优化点

1. 部分改变多个节点构成的同级组合时，使用 v-if 而不是 template；
2. 确保 key 为节点的唯一值。

使用 VD 的价值

1. 在不需要手动优化的情况下，使框架能提供过得去的性能；
2. 虽然在所有数据都变了的情况下，重置 innerHTML 其实是一个合理的操作，但局部更新 VD 的消费更小；
3. 因为 key 的存在，DOM 元素可以复用。

by 尤大： VD 真正的价值从来都不是性能，而是:

1. 为函数式的 UI 编程方式打开了大门；
2. 可以渲染到 DOM 以外的 backend，比如 ReactNative。

https://www.zhihu.com/question/31809713/answer/53544875

参考资料：

https://github.com/KieSun/My-wheels/tree/master/Virtual%20Dom