简单聊聊react和vue它们的diff算法_diff算法的理解vue和react

前言：React 和 Vue 都采用了 Virtual DOM，并基于它们的 Virtual DOM 实现了 diff 算法，用于对比新旧虚拟 DOM 树的差异，并尽可能地进行最小化更新，以优化页面渲染的性能。虽然两者都采用了类似的思路，但是它们的 diff 算法在实现细节上还是有一些区别的。

1. 算法思路

• Vue 的 diff 算法采用了双端比较的策略。这意味着 Vue 在新旧虚拟 DOM 树的两端分别设置了两个指针，然后同时向中间移动，在比较时尽可能减少 dom 树的比较次数。

• React 的 diff 算法采用了一种基于 Fiber 架构的双缓存技术，即每次页面更新时，同时在内存中创建两个 Virtual DOM树，一个是当前的 Virtual DOM 树，另一个是更新前的 Virtual DOM 树。比较新旧虚拟 DOM 树时，会使用 Fiber 架构中的 diff 算法对比它们的差异，并将更新计划保存到一个 fiber 对象中，最终将该 fiber 对象提交到渲染管线中进行更改。

2. 粒度控制

• Vue 的 diff 算法在比较新旧虚拟 DOM 树时，针对的是整个组件树的差异进行比较。这意味着在组件层面上，即使只有一个子节点更新了，整个组件树仍需要进行全量更新。

• React 的 diff 算法则更为细致，基于 Fiber 架构的特点，可以实现更加细粒度的控制。在页面更新时，React 会将更新划分为具有单一含义的“单元”，并最终进行增量更新。这意味着在组件层面上，即使只有一个子节点更新了，React只会更新对应的节点并重新构建与其相关的虚拟上下文，从而实现更加细粒度的更新。