为什么 React 中的 key 不能用索引？

大家好，我是 前端架构师 - 大卫。

关注微信公众号 @程序员大卫 ，回复 [资料] 即可领取前端精品资料包。

前言

在 React 中，React 自身无法自动生成合适的 key。只有你（开发者）最清楚你的数据结构，也只有你知道：在两次渲染之间，哪些元素是"相同"的（哪怕内容有变），哪些元素又是"全新的"。

通常情况下，key 应该来自数据本身，例如数据库中的唯一 ID、对象的唯一标识符等，而不应该使用数组的索引或随机数。

示例

来看一个简单的例子：

当我们删除 b 这一项时，预期渲染结果应该是：

css 复制代码

a
c

但实际结果却成了：

css 复制代码

a
b

问题出在哪？看一下代码：

js 复制代码

import { useState } from "react";
import "./App.css";

function App() {
  const [list, setList] = useState(["a", "b", "c"]);

  const handleDelete = (index) => {
    list.splice(index, 1);
    setList([...list]);
  };

  return (
    <div className="App">
      {list.map((item, index) => (
        <div key={index}>
          <input defaultValue={item} />
          <button onClick={() => handleDelete(index)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

export default App;

问题的本质：索引不是稳定的 key

当你使用数组索引作为 key 时，元素位置一旦变化，React 会错误地认为组件"没变"，于是继续复用旧的组件实例。

这导致本该删除或更新的节点没有被正确识别和替换，进而引发各种渲染问题（例如输入框错位、删除异常等）。

如果你使用随机 key 会怎样？

如果你改成这样：

js 复制代码

<div key={Math.random()}>

React 会认为："每次渲染，这些节点全都是全新的。" 于是它会：

销毁所有旧组件；
重新创建新的组件；
丢失所有组件内部状态（比如输入框的光标、临时值等）。

这样做虽然能"避免"索引问题，但也彻底失去了 React 高效更新的核心优势。每次渲染都像"重建整棵树"一样，没有任何性能可言。

总结

在 React 中：

key 应该是数据层面的唯一标识（如 ID、UUID、唯一名称）；
不要使用数组索引或随机数作为 key；
key 的作用是帮助 React 找到前后渲染中相同的元素，从而实现高效更新。

记住一句话：

React 不在乎你渲染了什么，而在乎的是：哪些东西变了，哪些没变。