虚拟 DOM 是 React 的一大亮点,具有 batching(批处理)和高效的 Diff 算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面,由虚拟 DOM 来确保只对界面上真正变化的部分进行实际的 DOM 操作。

  1. 虚拟 DOM 只在计算最终结束后再进行重绘重排。

  2. 虚拟 DOM 进行频繁修改,然后一次性比较并修改真实 DOM 中需要改的部分,最后并在真实 DOM 中进行排版与重绘,减少过多 DOM 节点排版与重绘损耗。

  3. 真实 DOM 频繁排版与重绘的效率是相当低的。

  4. 虚拟 DOM 有效降低大面积(真实 DOM 节点)的重绘与排版,因为最终与真实 DOM 比较差异,可以只渲染局部。