React 的 key 为什么不能随手用 index：一插入列表，状态就串了

很多人看见 key 的 warning，第一反应都是补个 index 让控制台安静。直到列表支持"在最前面插一条"，才发现问题根本不在 warning。

用户刚给"写周报"输入了一段草稿。新任务插到顶部后，那段草稿跑到了"新任务"这一行。接口数据没串，useState 也没写错，错的是给 React 的"这是谁"答案。

React 官方文档把 key 说得很直接：它用于让 React 在同一组元素里识别哪个数组项对应哪个组件。排序、插入、删除发生时，这个对应关系决定了已有组件和它的状态该复用给谁。

先看一个很常见的写法：

tsx 复制代码

import { useState } from 'react';

type Todo = { id: string; title: string };

function TodoRow({ todo }: { todo: Todo }) {
  const [draft, setDraft] = useState('');

  return (
    <label>
      {todo.title}
      <input
        value={draft}
        onChange={(event) => setDraft(event.target.value)}
        placeholder="给这条任务写草稿"
      />
    </label>
  );
}

export default function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([
    { id: 'a42', title: '写周报' },
    { id: 'b09', title: '修 bug' },
  ]);

  function prependTodo() {
    setTodos((current) => [
      { id: crypto.randomUUID(), title: '新任务' },
      ...current,
    ]);
  }

  return (
    <>
      <button onClick={prependTodo}>在顶部插入任务</button>
      {todos.map((todo, index) => (
        <TodoRow key={index} todo={todo} />
      ))}
    </>
  );
}

这里的 crypto.randomUUID() 没问题。它只在创建任务时跑一次，生成的 id 被存进数据里，之后不会变。

问题在 key={index}。插入前，位置 0 对应"写周报"；插入后，位置 0 变成了"新任务"。React 看到的仍是 key 为 0 的那个 TodoRow，就会把原来位置 0 的本地状态复用给新任务。于是标题换了，输入框的草稿没换。

改动只有一行：

tsx 复制代码

{todos.map((todo) => (
  <TodoRow key={todo.id} todo={todo} />
))}

现在"写周报"无论移动到第几行，a42 都还是 a42。React 能把它和原来的组件状态对上。新任务拿到新 id，也就从一份干净的状态开始。

这题面试里容易被答成"index 性能差"。不准确。核心不是性能，而是身份会不会随着位置漂移。

我会把判断标准压成一句：这组数据会不会排序、筛选、在中间插入、删除，或者异步刷新？只要会，index 就不是稳定身份。

还有几个容易踩的边界：

key 只要求在同一层兄弟节点之间唯一，不需要全站唯一。
不要在 render 时写 key={Math.random()}。每次渲染都换身份，React 只能卸载再重建，输入状态和焦点都会丢。
key 不会作为普通 prop 传进 TodoRow。子组件真要用 id，就显式写 <TodoRow key={todo.id} todo={todo} />。
静态列表可以用 index。比如永远不重排、不会增删的固定文案；React 文档也把这类情况列为少见例外。

被追问"key 到底做什么"时，可以这样答：它给同级元素一个稳定身份。React 不靠"它现在排第几个"猜组件是不是同一个，而是靠 key 把旧状态匹配回对应的数据项。

下次看到列表里的 map，先搜一下有没有 sort、filter、prepend 或删除操作。这个检查比补 warning 有用得多。