react diff算法和vue diff算法的区别
最新回答
╭一抹夏忧ヽ
2021-09-27 09:34:53
一、核心设计理念
1. React Diff
• 采用单向递归对比：仅对同级节点逐层比较，若节点类型不同则直接删除重建（不支持跨层级复用）。
• 依赖手动设置Key：通过Key识别可复用节点，未设置或Key不稳定时性能下降明显。
• 结合Fiber架构：支持时间分片异步渲染，但Diff本身以同步为主。
2. Vue Diff
• 采用双端对比策略：从新旧节点列表的头尾同时向中间对比，优先匹配可复用节点。
• 引入最长递增子序列（LIS）：在中间无序部分计算最长稳定序列，最小化节点移动操作。
• 实现编译时优化：通过模板静态分析标记动态节点（Patch Flags），运行时仅处理标记部分，减少对比范围。
二、列表对比策略
1. 指针移动方式
• Vue：双指针（头尾向中间移动），列表尾部节点移至头部时仅需一次操作。
• React：单指针（从左到右），列表顺序变化时可能触发多次移动/重建。
2. 典型场景差异
• 示例：列表`[A,B,C,D]`变为`[D,A,B,C]`时，Vue仅移动D节点一次；React需三次移动A/B/C。
三、节点复用策略
1. 类型与属性判断
• React：节点类型相同（如div）则仅更新变化属性，保留DOM节点。
• Vue：节点类型相同但关键属性（如class）不同时，视为不同节点并删除重建。
2. 跨层级操作
• 两者均不支持跨层级复用，子树层级变化时会整体销毁重建。
四、性能优化机制
1. Vue优化方向
• 静态提升（编译时优化）、Patch Flags标记动态节点、异步批量更新。
• 适用于复杂列表、频繁动态更新场景。
2. React优化方向
• Fiber分片渲染、依赖手动设置Key、同步/异步渲染切换。
• 适用于静态结构为主的场景。
热门标签
