Virtual Dom 是一个由 JavaScript 对象构成的树结构，用 JS 对象描述真实 DOM 结构。React 将每个 DOM 元素（如 <div>、<span>）或 react组件 抽象成一个 JS 对象（称为 VNode），包含标类型（type）、属性（props）、子节点（children）等信息，当组件状态（state/props）变化时，React 会先生成一棵新的虚拟 DOM 树，然后通过Diff 算法（Reconciliation）对比新旧虚拟 DOM 的差异，最后仅更新有变化的部分到真实 DOM。

为什么要用虚拟Dom(虚拟Dom优势)

1. 手动操作dom无法保证程序性能，部分开发者可能会写出性能极低的代码，使用react 虚拟Dom能够保证程序的性能下限，在不进行手动优化的情况下，提供过得去的性能。
   
2. 跨平台 虚拟DOM 本质上是 JavaScript 的对象，只需要搭配对应平台的渲染器，就能方便的进行跨平台开发
3. 提升开发者体验 虚拟DOM使得声明式代替命令式——“告诉 React 我要什么，剩下的 diff → patch 都由框架完成”，而不是“告诉浏览器怎么改真实的DOM"

虚拟 DOM 不是绝对最快

虚拟 DOM 相对原生的 DOM 不一定是效率更高，如果只修改一个按钮的文案，那么虚拟 DOM 的操作无论如何都不可能比真实的 DOM 操作更快。在首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，虚拟 DOM 也会比 innerHTML 插入慢。它能保证性能下限，在真实 DOM 操作的时候进行针对性的优化时，还是更快的。所以要根据具体的场景进行探讨。

在整个 DOM 操作的演化过程中，其实主要矛盾并不在于性能，而在于开发者写得爽不爽，在于研发体验/研发效率。虚拟 DOM 不是别的，正是前端开发们为了追求更好的研发体验和研发效率而创造出来的高阶产物。虚拟 DOM 并不一定会带来更好的性能，React 官方也从来没有把虚拟 DOM 作为性能层面的卖点对外输出过。虚拟 DOM 的优越之处在于，它能够在提供更爽、更高效的研发模式（也就是函数式的 UI 编程方式）的同时，仍然保持一个还不错的性能。