虚拟DOM 和 DOM diff

虚拟DOM

一个能代表DOM树的对象，通常含有标签名，标签上的属性，事件监听，和子元素们以及其他属性。

虚拟 DOM 优点

• 虚拟 DOM 可以将多次操作合并为一次操作：

  比如添加1000个节点，JS原生一个接一个操作的

  虚拟 DOM 借助 DOM diff 可以把多余的操作省掉

• 跨平台

  虚拟DOM不仅可以改变 DOM，还可以变成小程序，ios应用，安卓应用，因为虚拟 DOM本质上只是个 JS对象

虚拟 DOM 缺点

需要额外的创建函数，如createElement成h,但可以通过JSX 来简化成XML写法。

DOM diff

我们在平时工作中，其实很多时候都会使用到diff算法

比如你在git提交代码的时候使用的 git diff 命令，再或者是网上的一些代码比对工具，而我们的虚拟dom，核心就是diff算法，我们前面讲过，找出有必要更新的节点更新，没有更新的节点就不要动。这其中的核心就是如何找出哪些更新哪些不更新，这个过程就需要diff算法来完成

DOM diff整个过程具体步骤：

1. 用JS对象模拟DOM（虚拟DOM）
2. 把此虚拟DOM转成真实DOM并插入页面中（render）
3. 如果有事件发生修改了虚拟DOM，比较两棵虚拟DOM树的差异，得到差异对象（diff）
4. 把差异对象应用到真正的DOM树上（patch）

这篇文章只是抛砖引玉，介绍很浅显的关于 虚拟DOM的一些知识，大家想要了解的话可以深入其中，另外分享一篇一个认为不错的关于虚拟DOM文章 segmentfault.com/a/119000002…