虚拟DOM
什么是 虚拟DOM
虚拟DOM 其实就是一棵以 JavaScript 对象 (VNode 节点) 作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。 在 JavaScript 里面，虚拟 DOM 表现为一个 Object 对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性。不同的框架对这三个属性的名命可能会有差别。 不过总的来讲，Virtual DOM 对象的节点跟 DOM Tree 每个位置的属性一一对应的，因为人们创造出虚拟 DOM 就是为了更好地将虚拟节点渲染到视图上，也就是把虚拟DOM变成真实的 DOM 节点，提高视图的渲染性能。
虚拟DOM 的优点
减少 DOM 操作
- 虚拟DOM 可以将多次操作合并为一次操作（较少 DOM 操作次数）。
- 虚拟DOM借助 DOM diff 可以将多余的操作省略（减少 DOM 操作的范围）。
- 可以增加patch过程，提高性能。
- 开发者不需要关心如何操作 DOM，让我们的开发模式变成了只需要关心数据。
- 让跨平台成为了可能，虚拟DOM 不仅可以变成 DOM，还可以变成小程序，ios应用，安卓应用，因为 虚拟DOM 本质是一个 JS对象。
虚拟DOM 的缺点
需要额外的创建函数，如createElement 或 h，但可以通过 JSX 来简化成 XML 语法。
DOM diff
什么是 DOM diff
DOM diff 就是一个函数，我们称之为 patch。DOM diff 即比较两颗虚拟 DOM 树区别的算法。 diff 算法仅在两个树的同级的虚拟节点之间做比较，递归地进行比较，最终实现整个 DOM 树的更新。
diff算法 的三个步骤
- 用 JS 对象的方式来表示 DOM 树的结构，然后根据这个对象构建出真实的 DOM 树，插到文档中。
- 当状态变化的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树的差异。
- 最后把所记录的差异应用到所构建的真正的DOM树上，进行视图更新。
DOM diff 的缺点
DOM diff 在同级节点对比时存在 bug。造成页面渲染的误操作，需要使用 key 来辅助 diff 的对比。从而消除bug。
