7.React 中的 key 属性有什么作用？
输入“/”快速插入内容
7.React 中的 key 属性有什么作用？
7.React 中的 key 属性有什么作用？
用户8691用户86912025年9月14日修改
深入理解 React 中的 key：它为何如此重要？
在 React 开发中，当我们渲染一个列表时，几乎总会看到控制台提示一个熟悉的警告：Each child in a list should have a unique "key" prop。
许多初学者可能会通过 key={index} 快速“解决”这个警告，但这样做有时会埋下隐患。key 属性的意义远不止是消除一个警告，它与 React 的核心工作机制——协调（Reconciliation）算法紧密相关。
理解 key 的真正作用，是深入掌握 React 性能优化和组件状态管理的关键一步。
key 的核心使命：元素的“身份证”
我们可以将 key 想象成列表中每个元素的**唯一身份证**。
当 React 渲染一个列表时，它会生成一个虚拟 DOM 树。当列表数据发生变化（例如，增、删、改、重排），React 需要高效地更新真实 DOM。它通过对比新旧两棵虚拟 DOM 树的差异，找出最小的变更集来执行更新，这个过程就是“协调”。
如果没有 key，React 只能通过元素在列表中的**位置（index）**来逐个对比。我们来看一个场景：
假设我们有一个简单的列表：
代码块
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
现在，我们在列表的开头插入一个新项目“橙子”：
代码块
<ul>
<li>橙子</li>
<li>苹果</li>
<li>香蕉</li>
</ul>
在 React 的视角里，如果没有 key，它会这样对比：
1.
“咦，第一个 <li> 的内容从‘苹果’变成了‘橙子’，我需要更新它。”
2.
“第二个 <li> 的内容从‘香蕉’变成了‘苹果’，我也需要更新它。”
3.
“哦，最后多出来一个 <li> 叫‘香蕉’，我需要新建并插入它。”
这显然不是最高效的方式。实际上，我们只是插入了一个元素，而原有的两个元素并没有改变。这种基于索引的对比，导致了大量不必要的 DOM 操作。
现在，我们为列表加上 key：
代码块
// 初始状态
<ul>
<li key="apple">苹果</li>
<li key="banana">香蕉</li>
</ul>
// 更新后
<ul>
<li key="orange">橙子</li>
<li key="apple">苹果</li>
<li key="banana">香蕉</li>
</ul>