React 进阶面试题, 为什么 React 使用虚拟 DOM 来提高性能?
React 进阶面试题, 为什么 React 使用虚拟 DOM 来提高性能?
QA
Step 1
Q:: 为什么 React 使用虚拟 DOM 来提高性能？
A:: React 使用虚拟 DOM 是为了提高性能并简化开发。虚拟 DOM 是 React 的核心特性之一，它是一种轻量级的 JavaScript 对象，用于描述真实 DOM 的状态。当状态或属性发生变化时，React 会在虚拟 DOM 中重新计算新的界面表示，然后将其与之前的虚拟 DOM 进行比较（这一过程叫做 'diffing'）。在找到差异后，React 将这些差异应用到实际的 DOM 上，而不是直接重绘整个页面，这显著减少了直接操作 DOM 的成本，提高了性能。
Step 2
Q:: 虚拟 DOM 是如何工作的？
A:: 虚拟 DOM 是一个树状结构，它用 JavaScript 对象表示 DOM 树的结构。当组件的状态改变时，React 会先在虚拟 DOM 中生成新的树结构，然后将其与旧的树结构进行比较，找出最小的变动部分。React 使用高效的算法（如 'diffing' 算法）来确定实际需要更新的部分，并仅对这些部分进行真实 DOM 的更新操作，从而提高了性能。
Step 3
Q:: 什么是 diffing 算法？
A:: diffing 算法是 React 在比较两棵虚拟 DOM 树时使用的算法。由于完全比较两棵树的复杂度为 O(n^3)，这对性能非常不利。React 通过一系列假设（如相同的节点具有相同的结构）简化了这个过程，将复杂度降为 O(n)，即线性时间复杂度。这种优化允许 React 快速找出虚拟 DOM 中变化的部分，并仅更新这些部分对应的真实 DOM 节点。
Step 4
Q:: 虚拟 DOM 的优势和劣势是什么？
A:: 虚拟 DOM 的主要优势在于提高了性能、简化了开发以及跨浏览器的兼容性。然而，虚拟 DOM 也有一些劣势，如在极少数情况下直接操作 DOM 可能比使用虚拟 DOM 更快，另外虚拟 DOM 的抽象层也可能增加一些小的内存开销。尽管如此，对于大多数应用来说，虚拟 DOM 提供的优化和便利远远超过了这些缺点。