什么是 Virtual DOM?

Virtual DOM 是一种编程概念，不仅仅只在 React 中使用，在其他框架如 Vue 也应用了 Virtual DOM 的概念。然而，本文将重点关注 React Virtual DOM。 Virtual DOM 是通过 JavaScript 物件储存在记忆体中，模拟真实 DOM 的方法。

Virtual DOM 比直接操作 DOM 更快速吗?

许多人会认为使用 Virtual DOM 的好处是，比直接操作 DOM 更有效率更快速，但这个观念并不完全正确。 React 官方从来没有宣称 Virtual DOM 比直接操作 DOM 更为快速。相反的，使用 Virtual DOM 因为因为多一层操作，跟原生操作 DOM 相比，通常会比较慢。

那为什么还要使用 Virtual DOM 呢?

React Virtual DOM 的好处

React 官方在文档说明，使用 Virtual DOM 的好处是，可以使用声明式语法编写 React。换句话说，这意味着我们不需要直接操作 DOM，而是通过声明式语法。使用声明式的写法让开发者不需要直接操作 DOM，而是透过 state 来告诉 React 我们想要的 UI 画面，React 会确保 DOM 和 state 是匹配的。

使用声明式的写法可以避免以下直接操作 DOM 的两个问题：

当 DOM Tree 结构越来庞大时，会难以管理。例如，现在有一个很大表单元件，当改变一个值时，可能会需要遍历所有表单元件的节点并操作 DOM 更改值，在这过程中很容易造成难以发现的 Bug。
效率很低。虽然操作 DOM 可能很快速，但在重绘跟回流阶段的时候往往是造成画面卡顿的主因，因此频繁直接操作 DOM 越有可能导致效能的瓶颈。

通过使用 Virtual DOM 可以让开发者只关注于 UI 状态，不用担心如何实现它。在渲染过程中，React 会自动生成 Virtual DOM，并且比较前后两次 Virtual DOM 的差异，只更新发生变化的部分。