登录
面试官：React Diff 算法原理？我：三个假设 + O(n) 复杂度，手撕给你看！
🧠 系列前言：
面试题千千万，我来帮你挑重点。每天一道，通勤路上、蹲坑时、摸鱼中，技术成长不设限！本系列主打幽默 + 深度 + 面霸必备语录，你只管看，面试场上稳拿 offer！
💬 面试官发问：
"React 的 Virtual DOM diff 算法是怎么实现的？为什么要用 key？三个假设是什么？"
哎呀，这题经典得像老北京炸酱面，每次面试都会遇到。Virtual DOM diff，听起来高大上，其实就是 React 的"比较专家"，专门负责找出新旧虚拟 DOM 的差异。
🎯 快答区（初级背诵版）
React 的 diff 算法基于三个假设：同层级比较、不同类型元素会产生不同的树、通过 key 来标识列表元素。算法复杂度从 O(n³) 优化到 O(n)，主要通过单层遍历、类型判断和 key 匹配来实现高效更新。
面试官：嗯，还行，但我想听点你背不出来的内容 😏
🧠 深入理解：Diff 算法的江湖传说
📌 1. 为什么需要 Diff 算法？
想象一下，你有一个超大的购物清单，每次修改都要重新写一遍：
// 旧清单
const oldList = ['苹果', '香蕉', '橙子', '葡萄'];
// 新清单（只是把香蕉换成了芒果）
const newList = ['苹果', '芒果', '橙子', '葡萄'];
笨方法：撕掉重写 → 浪费纸张 → 环保局找上门
聪明方法：找出差异，只改"香蕉"→"芒果" → 省时省力
React 的 diff 算法就是这个聪明方法，它要在新旧两棵虚拟 DOM 树中找出最小的变化，然后只更新需要变化的部分。
🎯 2. 传统 Diff 的噩梦：O(n³) 复杂度
如果要完美比较两棵树的差异，传统算法需要：
- 遍历树 A 的每个节点：O(n)
- 遍历树 B 的每个节点：O(n)
- 计算编辑距离：O(n)
总复杂度：O(n³)
对于 1000 个节点的应用，就是 10 亿次操作！ React 团队一看：这样下去，用户要等到花儿都谢了！
🧠 3. React 的三个"天才假设"
React 团队经过观察发现，实际开发中：
假设 1：同层级比较
不同层级的节点很少会移动
// 这种情况很少发生
<div>
<span>Hello</span> // 从这里
</div>
<p>
<span>Hello</span> // 移动到这里
</p>
所以 React 只比较同一层级的节点，跨层级直接删除重建！
假设 2：不同类型 = 不同树
不同类型的元素会产生不同的树
// 从 div 变成 span
<div>Hello</div> → <span>Hello</span>
React 直接删除旧树，创建新树，不做进一步比较！
假设 3：Key 是列表的身份证
开发者可以通过 key 来暗示哪些子元素是稳定的
// 有了 key，React 就知道谁是谁
{items.map(item =>
<Item key={item.id} data={item} />
)}
基于这三个假设，React 把 O(n³) 优化成了 O(n) ！
🎢 4. Diff 算法的三大战场
战场1：Tree Diff（树级别）
// 情况1：同类型节点
<div className="old"> <div className="new">
<span>Hello</span> → <span>Hello</span>
</div> </div>
// 结果：只更新 className
// 情况2：不同类型节点
<div>Hello</div> → <span>Hello</span>
// 结果：删除 div，创建 span
战场2：Component Diff（组件级别）
// 情况1：同类型组件
<MyComponent name="old" /> → <MyComponent name="new" />
// 结果：更新 props，可能触发重新渲染
// 情况2：不同类型组件
<ComponentA /> → <ComponentB />
// 结果：卸载 A，挂载 B
战场3：Element Diff（元素级别）
这是最复杂的战场，主要处理列表更新：
// 老列表
['A', 'B', 'C', 'D']
// 新列表
['A', 'C', 'D', 'B']
没有 key 的情况：
- React 按顺序比较
- B→C，C→D，D→B，最后插入 B
- 需要 3 次更新 + 1 次插入
有 key 的情况：
- React 知道 B 只是移动了位置
- 直接移动 B 到末尾
- 只需要 1 次移动操作
🔍 5. Key 的选择艺术
❌ 错误示范
// 用 index 当 key（面试官最爱问的反面教材）
{items.map((item, index) =>
<Item key={index} data={item} />
)}
问题：当列表顺序改变时，key 和内容的对应关系就乱了！
✅ 正确示范
// 用稳定的唯一标识当 key
{items.map(item =>
<Item key={item.id} data={item} />
)}
🎨 6. Diff 算法的核心实现逻辑
function diff(oldVNode, newVNode) {
// 1. 节点类型不同，直接替换
if (oldVNode.type !== newVNode.type) {
return { type: 'REPLACE', newVNode };
}
// 2. 文本节点，比较内容
if (typeof newVNode === 'string') {
if (oldVNode !== newVNode) {
return { type: 'TEXT', newVNode };
}
return null;
}
// 3. 同类型元素，比较属性和子节点
const propsPatches = diffProps(oldVNode.props, newVNode.props);
const childrenPatches = diffChildren(oldVNode.children, newVNode.children);
if (propsPatches.length || childrenPatches.length) {
return { type: 'UPDATE', propsPatches, childrenPatches };
}
return null;
}
🎯 7. 列表 Diff 的核心算法
React 使用了一个聪明的双指针算法：
function diffChildren(oldChildren, newChildren) {
let oldStartIdx = 0, newStartIdx = 0;
let oldEndIdx = oldChildren.length - 1;
let newEndIdx = newChildren.length - 1;
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
// 头头比较
if (sameVnode(oldChildren[oldStartIdx], newChildren[newStartIdx])) {
// 相同节点，继续比较
diff(oldChildren[oldStartIdx], newChildren[newStartIdx]);
oldStartIdx++;
newStartIdx++;
}
// 尾尾比较
else if (sameVnode(oldChildren[oldEndIdx], newChildren[newEndIdx])) {
diff(oldChildren[oldEndIdx], newChildren[newEndIdx]);
oldEndIdx--;
newEndIdx--;
}
// 头尾比较
else if (sameVnode(oldChildren[oldStartIdx], newChildren[newEndIdx])) {
// 需要移动节点
moveNode(oldChildren[oldStartIdx], 'after', oldChildren[oldEndIdx]);
oldStartIdx++;
newEndIdx--;
}
// 尾头比较
else if (sameVnode(oldChildren[oldEndIdx], newChildren[newStartIdx])) {
moveNode(oldChildren[oldEndIdx], 'before', oldChildren[oldStartIdx]);
oldEndIdx--;
newStartIdx++;
}
// 都不匹配，查找表
else {
findAndMove();
}
}
// 处理剩余节点
handleRemainingNodes();
}
💬 面试中可以抛出的装 X 语录
- "React 的 diff 算法是一种启发式算法，通过合理的假设将复杂度从 O(n³) 降到 O(n)。"
- "Key 不仅是性能优化的手段，更是帮助 React 理解组件身份的重要线索。"
- "Same level comparison 是 React diff 的核心思想，体现了工程化中的权衡艺术。"
- "双指针算法在列表 diff 中的应用，让我看到了算法在实际场景中的优雅实现。"
（说完记得停顿两秒，喝一口水，看面试官点头）
✅ 总结一句话
React Diff 算法 = 基于三个假设的启发式算法，通过同层比较、类型判断和 key 匹配，实现了 O(n) 复杂度的高效 DOM 更新，它是 React 性能优化的核心基石。
🔚 系列结尾：明日继续爆料！
明天继续来一道面试题，咱们聊聊 React Hooks 的原理和闭包陷阱（别看 Hooks 用得溜，原理可能比你想象的更有趣🪝）。
📌 点赞 + 收藏 + 关注系列，让你成为面霸不是梦！
