一、DOM
DOM（文档对象模型）：
- 一个允许JavaScript程序与不同类型的文档（HTML、XML和SVG）进行交互的编程接口即DOM API。
- 反映了XML文档层次结构的树形结构，这个树结构由子树组成，子树由节点组成。节点是组成Web页面和应用的和其他元素。
- 提供了访问、存储和操纵文档不同部分的结构化方式。
DOM树结构
DOM API： 使用JavaScript中的方法访问、修改或者存储一些HTML文档相关的信息，如document.findElemenyById、querySelectorAll、alert等。这些接口都是由宿主环境（浏览器）提供的并允许JavaScript与DOM交互。
二、虚拟DOM
-
出现原因：当访问、修改或创建DOM元素时，浏览器常常要在一个结构化的树上执行查询来找到指定的元素。通常情况下，作为更改的一部分，它不得不重新进行布局、缩放和其他操作——所有这些操作往往计算量都很大。虚拟DOM也无法绕过这个问题，但它可以在这些限制下帮助优化对DOM的更新。
-
虚拟DOM：模仿或镜像存在于浏览器中的文档对象模型的数据结构或数据结构的集合。通常，虚拟DOM会作为应用程序代码和浏览器DOM之间的中间层，隐藏了变更检测与管理的复杂性并将其转移到专门的抽象层。
React的虚拟DOM处理数据的变更检测并将浏览器事件转换为React组件可以理解和响应的事件，虚拟DOM还为性能优化了对DOM的更新操作。
三、更新和差异对比
React在内存中创建并维护了一个虚拟DOM，并且一个像React-DOM这样的渲染器基于更改对浏览器DOM进行更新。React可以执行智能更新并且只更新已更改的部分，因为它可以使用启发式对比来计算内存DOM的哪些部分需要更新到DOM。
当改变发生时，React确定实际DOM和内存DOM的差异，然后对浏览器DOM执行高效更新。这个过程通常被称为diff（什么改变了）和patch（只更新改变的东西）过程
四 总结
- 虚拟DOM一定程度上能够让开发人员推迟思考复杂的状态逻辑并专注于应用中其他更重要的部分。
- 虚拟DOM提升应用性能。
