简述React 与 Vue 的 diff 算法有何不同 ？
参考回答
React 和 Vue 都有各自的虚拟 DOM 和 Diff 算法，用来优化更新 DOM 的性能。虽然它们的目标相同，但在实现细节上有所不同。
- React Diff 算法：
- 基于组件层级的对比：React 的 Diff 算法假设每次渲染中，组件的结构可能会发生变化。因此，它的策略是尽可能通过比较同一层级的节点来决定更新。React 会通过节点类型来判断是否需要更新或替换一个元素。如果节点类型不同，React 会直接销毁旧节点并重新渲染新节点。
- 列表优化（Key）：React 使用
key来优化列表项的更新。当列表项的顺序变化时，React 能根据key判断哪些元素被移动，从而减少不必要的 DOM 操作。 - 时间复杂度：React 的 Diff 算法在同层级的节点对比时是 O(n)，其中 n 是节点的数量。它通过假设不同层级的节点不会重用，来减少不必要的更新。
- Vue Diff 算法：
- 基于节点层级的对比：Vue 的 Diff 算法在更新时更关注 DOM 节点的层级，它会递归地比较每一层节点，尝试尽可能多地重用旧节点，减少不必要的销毁和重建。Vue 在对比时，采用了双端对比策略，即先从头部开始比对，如果不匹配再从尾部进行比对。
- 虚拟 DOM 的优化：Vue 采用了更精细的虚拟 DOM 比较策略，在对比不同节点时，Vue 会更多地使用 静态节点标记 来优化不必要的 DOM 比较。即如果某个节点没有变化，Vue 会直接跳过该节点的对比。
- 列表优化（Key）：Vue 与 React 类似，也使用
key来优化列表渲染，避免对整个列表进行重新渲染。Vue 会通过key来确保在列表更新时最大限度地重用旧节点。
详细讲解与拓展
- React 的 Diff 算法：
- 算法思路：React 的 Diff 算法假设两个不同的组件树中不同层级的元素不会重用。如果两个元素的类型不同，React 会直接销毁旧的节点并替换为新的节点。它的比较是基于组件和虚拟 DOM 节点的类型进行的，因此它的算法比较简单，优化了大多数常见的应用场景。
例如，React 在同一层级上比较节点时，如果节点类型不相同（比如一个
<div>被替换成<h1>），就会直接销毁原节点并重新渲染新节点。
- 算法思路：React 的 Diff 算法假设两个不同的组件树中不同层级的元素不会重用。如果两个元素的类型不同，React 会直接销毁旧的节点并替换为新的节点。它的比较是基于组件和虚拟 DOM 节点的类型进行的，因此它的算法比较简单，优化了大多数常见的应用场景。
- 高效的列表更新：在渲染列表时，React 依赖
key来优化性能。通过key，React 知道哪些元素移动了，哪些元素被添加或删除，从而精确地进行更新，避免了不必要的元素重建。
-
Vue 的 Diff 算法：
- 算法思路：Vue 在虚拟 DOM 的 Diff 算法上更侧重于节点的层级关系，它使用递归比较和双端比较策略来尽可能重用旧节点。Vue 通过静态节点标记来优化，避免了不必要的更新。例如，如果一个子组件没有变化，Vue 会跳过对子组件的比较，而直接复用该子组件的旧节点。
Vue 采用的双端比较方法意味着 Vue 会从两端同时开始对比，先从头部进行比较，若失败则从尾部进行对比。这样可以提高更新效率，尤其是在有大量子节点的情况下。
- 算法思路：Vue 在虚拟 DOM 的 Diff 算法上更侧重于节点的层级关系，它使用递归比较和双端比较策略来尽可能重用旧节点。Vue 通过静态节点标记来优化，避免了不必要的更新。例如，如果一个子组件没有变化，Vue 会跳过对子组件的比较，而直接复用该子组件的旧节点。
- 静态节点优化：Vue 通过标记静态节点来优化性能，对于不会变化的部分，Vue 会在首次渲染时标记为静态节点，这样在后续更新中，Vue 会跳过这些节点的比较，直接复用原节点。
-
性能差异：
- React：React 的 Diff 算法相对简单，采用的是组件层级对比，假设节点类型不同会销毁旧节点并替换新节点。这使得 React 的算法在大多数场景下足够高效，但在某些极端情况下，比如大量动态变化的列表，可能会有一些性能瓶颈。
- Vue：Vue 在 Diff 算法中采用了更加细致的优化策略，如静态节点标记和双端对比，这使得 Vue 在某些场景下（尤其是树形结构和大量静态内容的情况）能更高效地更新 DOM。
- 列表渲染的对比：
- React 和 Vue 都通过
key来优化列表渲染，key可以帮助两者更精确地判断元素的增删改动。但是，React 更侧重于通过key来判断元素的位置和身份，Vue 则会更多考虑节点本身的静态性和子树的稳定性，以减少不必要的更新。
- React 和 Vue 都通过
总结
React 和 Vue 都有虚拟 DOM 和 Diff 算法，但它们的实现有所不同。React 采用基于组件层级的对比，假设不同层级的元素不共享，重点优化了列表渲染和状态更新；而 Vue 在 Diff 算法中使用了递归比较、双端对比策略和静态节点标记，更注重节点层级的精细控制和不必要更新的跳过。在性能上，Vue 在某些复杂场景下可能会有更好的表现，特别是在处理静态内容时。