DOM 操作是现代动态网页实现的核心。但它往往比大多数 JavaScript 的操作慢很多。
由于大多数JavaScript框架更新DOM而不是必须更新，因此这种情况变得更加缓慢。为了避免浏览器进行很多不必要渲染的，React 的开发者们设计了一种叫做虚拟DOM的东西。
要解决的问题
DOM 操作是现代动态网页实现的核心。但它往往比大多数 JavaScript 的操作慢很多。
由于大多数JavaScript框架更新DOM而不是必须更新，因此这种情况变得更加缓慢。
例如，假设您有一个包含十个项目的列表。你删掉了了第一项。大多数JavaScript框架都会重建整个列表，这比必要的工作多十倍！事实上只有一个项目发生了变化，但剩下的九个项目完全重建了以前的样子。
也许重建列表对于 Web浏览器来说是小菜一碟，但现代网站需要使用的大量的DOM操作并不止如此。低效的更新已经成为一个严重的问题。
为了解决这个问题，React 的开发者们普及了一种叫做虚拟DOM的东西。
虚拟DOM
在 React 中，对于每个 DOM 对象，都有一个相应的“虚拟DOM对象”。虚拟DOM对象是DOM对象的表示，就像轻量级副本一样。
虚拟DOM对象具有与真实DOM对象相同的属性，但它缺乏直接更改屏幕上内容的真实功能。
尽管操纵DOM很慢，操作虚拟DOM的速度要快得多，因为屏幕上不会绘制任何内容。你可以将虚拟 DOM 操作为想象为重绘建筑蓝图，而不是在实际房屋中直接改造房间。
它是怎么工作的
渲染 JSX 元素时，每个虚拟 DOM 对象都会更新。
尽管这听起来非常低效，但其开销其实微不足道，因为虚拟DOM可以快速地更新。虚拟 DOM 更新后，React 会将虚拟 DOM 与更新前获取的虚拟 DOM 快照进行比较。
通过将新虚拟 DOM 与更新前版本进行比较，React 确切地确定了哪些虚拟 DOM 对象已更改。这个过程叫 “差异化”
一旦 React 知道哪些虚拟 DOM 对象发生了变化，React 就会在真实 DOM 上更新这些对象，并且只更新那些改变了的对象。
这是一个很大的创新！ React只会更新DOM的必要部分。 React 在性能方面的声誉主要来自这项创新。
总结起来，React中在更新DOM时主要有以下几步：
- 整个虚拟DOM得到更新。
- 将虚拟DOM与更新之前的内容进行比较。 React确定哪些对象已更改。
- 当且仅当更改的对象会在真实DOM上更新。
- 修改真实 DOM 的，在屏幕上展示变化。