为什么虚拟 dom 会提高性能?

虚拟 DOM 的引入可以提高性能的原因有以下几点：

1. 最小化真实 DOM 操作：真实 DOM 操作是相对昂贵的，通过使用虚拟 DOM，我们可以将组件的更新先应用到虚拟 DOM 上，然后通过比较虚拟 DOM 与上一次的状态来确定需要进行的真实 DOM 操作的最小化集合。这样可以减少对真实 DOM 的频繁操作，从而提高性能。

2. 批量更新：虚拟 DOM 允许 React 在组件内部对多次状态变化进行批量更新。当多个状态变化发生时，React 会将其合并为一次更新操作，只对虚拟 DOM 进行一次比较和真实 DOM 操作，避免了不必要的中间过程，提高了效率。

3. 减少重绘和回流：虚拟 DOM 可以通过算法优化，将多个连续的操作合并成一次更新，减少了浏览器的重绘和回流（重新计算布局）。这是因为虚拟 DOM 在比较过程中，可以批量计算出最终的改动，然后一次性应用到真实 DOM，减少了不必要的布局计算。

4. 跨平台支持：虚拟 DOM 是与平台无关的，可以在不同的平台上使用相同的虚拟 DOM 抽象层进行开发，只需针对不同平台编写渲染器即可。这样可以使开发人员更加专注于业务逻辑，而不需要关心底层平台的差异性，提高了开发效率。

总体而言，虚拟 DOM 的引入可以减少对真实 DOM 的操作次数，优化更新过程，减少浏览器的重绘和回流，提高了 React 应用的性能和用户体验。当组件状态变化频繁时，虚拟 DOM 的优势更为明显