React 与 Vue 的 diff 算法有何不同

类别：react / 日期：2023-01-06 / 浏览：235 / 评论：0

diff 算法是指生成更新补丁的方式，主要应用于虚拟 DOM 树变化后， 更新真实 DOM。所以 diff 算法一定存在这样一个过程：触发更新 → 生成补丁 → 应用补丁。

React 的 diff 算法，触发更新的时机主要在 state 变化与 hooks 调用之后。此时触发虚拟 DOM 树变更遍历，采用了深度优先遍历算 法。但传统的遍历方式，效率较低。为了优化效率，使用了分治的方 式。将单一节点比对转化为了 3 种类型节点的比对，分别是树、组 件及元素，以此提升效率。

树比对：由于网页视图中较少有跨层级节点移动，两株虚拟 DOM 树 只对同一层次的节点进行比较。

组件比对：如果组件是同一类型，则进行树比对，如果不是，则直接 放入到补丁中

元素比对：主要发生在同层级中，通过标记节点操作生成补丁，节点 操作对应真实的 DOM 剪裁操作。

以上是经典的 React diff 算法内容。自 React 16 起，引入了 Fiber 架构。为了使整个更新过程可随时暂停恢复，节点与树分别采用了 FiberNode 与 FiberTree 进行重构。fiberNode 使用了双链表的结 构，可以直接找到兄弟节点与子节点。整个更新过程由 current 与 workInProgress 两株树双缓冲完成。workInProgress 更新完成后， 再通过修改 current 相关指针指向新节点。-react

Vue 的整体 diff 策略与 React 对齐，虽然缺乏时间切片能力，但 这并不意味着 Vue 的性能更差，因为在 Vue 3 初期引入过，后期因 为收益不高移除掉了。除了高帧率动画，在 Vue 中其他的场景几乎 都可以使用防抖和节流去提高响应性能。-vue