虚拟dom

概念：使用js对象对真实dom的一种描述
原理：
js操作->真实dom渲染 这一层中间加了一层
js操作->虚拟dom diff->真实dom渲染
优化：
差量更新：当 DOM 操作（渲染更新）比较频繁时，它会先将前后两次的虚拟 DOM 树进行对比，定位出具体需要更新的部分，生成一个“补丁集”，最后只把“补丁”打在需要更新的那部分真实 DOM 上，实现精准的“差量更新”
批量更新：使用batch函数，batch 的作用是缓冲每次生成的补丁集，
它会把收集到的多个补丁集暂存到队列中，再将最终的结果交给渲染函数，最终实现集中化的 DOM 批量更新

价值

1.提高了研发体验和研发效率，为数据驱动视图这一思想提供了高度可用的载体，使得前端开发能够基于函数式 UI 的编程方式实现高效的声明式编程
2.跨平台的问题：虚拟 DOM 是对真实渲染内容的一层抽象。类似于多端抽象出来的中间层

调和的概念

通过如 ReactDOM 等类库使虚拟 DOM 与“真实的” DOM 同步，这一过程叫作协调（调和）。
diff是调和过程中最突出的一部分

Diff要点

1.Diff算法性能突破的关键点在于分层对比。DOM 节点之间的跨层级操作并不多，同层级操作是主流
2.类型一致（key和tagName都相同）的几点才有diff的必要性。若两个组件属于同一个类型，那么它们将拥有相同的 DOM 树形结构
3.key 属性的设置，可以帮我们尽可能重用同一层级内的节点。key能解决同一层级下，节点重用问题