前言

在面试中，手写虚拟DOM和diff算法往往是区分“会用React”和“懂React”的关键点。很多前端能说出虚拟DOM的好处，却在实际实现时卡在key 的使用细节上。特别是为何不能把数组索引当作 key。其实，

一、AI 生成的虚拟DOM主要代码

// 创建虚拟节点
function h {
return { type。props: props || {},children: children.flat };}
// 渲染虚拟 DOM 到真实 DOM
function render {
if return document.createTextNode;const el = document.createElement;for {
el.setAttribute;}
vnode.children.forEach));return el，}
// 简易 diff
function patch {
// 文本节点处理
if {
if {
parent.replaceChild,oldVnode);按理说，}
return;}
// 类型不同直接替换
if {
parent.replaceChild,oldVnode);return，}
// 相同类型：属性更新
// ----------------- key 匹配主要 -----------------
const oldChildren = oldVnode.children;const newChildren = newVnode.children;const keyedOld = new Map;// 将旧节点按 key 建立索引
oldChildren.forEach => {
if keyedOld.set;})，// 遍历新节点，复用相同 key 的旧节点
newChildren.forEach => {
if {
const matched = keyedOld.get;if {
// 重用该 DOM 节点并递归更新子树
patch;//
return，}
}
// 没有匹配则插入新节点
parent.appendChild);})，}

二、我反问了面试官一个痛点问题

代码展示完后我主动抛出一个常见坑：“很多人都会把数组索引当作 key 用，你知道这样会有什么副作用吗？”

面试官兴趣盎然：

• Diff 算法通过 key 判断节点是否相同。如果把索引当作 key,当列表顺序变化时原本位于索引 0 的节点 A 会被误判为仍然是索引 0 的节点 B。React 会复用旧 DOM，只是 内容，导致状态错乱。
• 性能陷阱。在列表头部插入一个元素会导致所有后续元素的索引都改变，所有节点都会被“原地修改”。这不仅破坏了 UI 稳定性，还会比根本不使用 key 更慢。
• 正确做法：使用业务数据中唯一且稳定的标识（如数据库主键 ID) 来作为 key,保证即使顺序变化也能精准定位对应的真实 DOM。

三、为何这个“反客为主”的回答能赢得认可？

• 展示思考深度：不仅知道概念。还能举例说明实际场景下的错误表现，如输入框焦点错位、动画突变等。说起来，
• 体现实际经验：主动指出生产中的坑。说明你已经在项目里遇到并解决过类似问题，而不是只会背书。
• 竞争力更明显：相比单纯实现功能。能够解释底层原理并关联业务需求，是面试官最看重的软实力。

四、完整可运行的迷你虚拟DOM代码

#idKey vs indexKey vs noKey 的差异：

// ------------------- Mini VDOM -------------------
function h {
return { type。props: props || {},children: children.flat };}
function render {
if return document.createTextNode;const el = document.createElement;// 设置属性
for {
if el.setAttribute;}
vnode.children.forEach));// 为后续 diff 保存引用
vnode.el = el;return el，}
// ---------- 简易 Diff + Key 调整 ----------
function patch {
// 完全相等直接返回
if return;// 文本节点处理
if {
if parent.replaceChild,oldVNode.el || oldVNode);return，}
// 类型不同直接替换
if {
parent.replaceChild,oldVNode.el);return，按理说，}
// 更新属性——这里仅演示关键逻辑
// ----------- Children Diff ----------
const oldChildren = oldVNode.children;const newChildren = newVNode.children;// 建立旧子树的 key 索引表
const keyedMap = new Map;
oldChildren.forEach=>{
if{
keyedMap.set;}
})，// 新子树遍历 & 重用或创建
let lastPlacedIndex = -1;怎么说呢，newChildren.forEach=>{
if{
const match = keyedMap.get;话说回来，if{
// 重用旧 DOM 并递归更新子树
patch;老实说，// 若位置改变。需要移动真实 DOM
const curEl = match.v.el;const refNode = parent.childNodes;if{
parent.insertBefore;}
delete keyedMap.get;// 标记已处理
return;}
}
// 没有匹配 → 插入新节点
const refNode = parent.childNodes;const rendered = render;if{
parent.insertBefore;}else{
parent.appendChild;}
})，// 删除旧树中未被复用的节点
keyedMap.forEach=>{
v.el && v.el.parentNode.removeChild;})，}
// ------------------- 示例 -------------------
const listContainer = document.createElement;按理说，document.body.appendChild;// 初始数据
let state1 =;// 渲染函数
function renderList{
return h('ul'。null,...data.map)
);}
// 首次挂载
let prevVDom = renderList;listContainer.appendChild);// ---- 场景一：交换顺序 ----
setTimeout=>{
console.log;const state2 =;const nextVDom = renderList;patch，prevVDom=nextVDom;},1500)，// ---- 场景二：头部插入新项 ----
setTimeout=>{
console.log;const state3=;const nextVDom=renderList;patch，prevVDom=nextVDom;},3000)，// ---- 场景三：使用 index 当 key----
setTimeout=>{
console.log;function badRender{
return h('ul'。null,...data.map=>h) // 错误做法
);}
const badNext=badRender);patch，},4500);// -------------------------------------------------

You can open console and watch how list updates. When using proper ID-based keys items keep ir internal state;when swapping to an index‑based key you’ll see unexpected changes—exactly pain point interviewers love to probe.

五、写在最终——把“为什么不能用 index”转化为你的竞争力

• Pain Point #1： 很多候选人在实现 diff 时只会敲代码，却不了解键值对 UI 稳定性的影响。
• Pain Point #2： 面试官经常通过 “index 能否作为 key” 来判断候选人的深度思考能力。
• Pain Point #3： 实际项目里若误用了 index，会导致表单失焦、动画抖动等难以调试的问题。话说回来，

A solid answer should包含：

1. *概念*： Key 用于跨渲染周期唯一标识同一逻辑实体。老实说，
2. *错误示例*： 使用数组索引导致复用错误节点。引发状态错乱和性能下降，
3. *常用方法*： 坚持使用业务唯一 ID；若没有唯一字段，则先生成 stable UUID 再作为 key。
4. *实战验证*： 

掌握了以上要点。你就能在面试中从“会写”跃升到“懂底层”，把 “手写虚拟DOM时为何key不能用索引？”这道经典题目变成你的"加分项".

)