React中key的作用是什么？

在React里渲染列表时，你肯定见过那个经典的警告：“Each child in a list should have a unique ‘key’ prop”。很多人只是随便加个key={index}把警告消掉就算了。但key的作用远不止于此，它其实是React高效更新列表的“幕后功臣”。

帮助React识别元素的身份

你可以把key理解为每个列表元素的“身份证号”。当列表的数据发生变化时（比如增加、删除、重新排序），React需要知道新旧虚拟DOM树之间元素的对应关系。key就是用来建立这个关联的。

如果没有key，React默认会使用元素的索引（也就是在数组里的位置）来进行对比。这会导致问题。

// 初始列表
const items = ['A', 'B', 'C'];
items.map((item, index) => <div key={index}>{item}</div>);
// 渲染：<div key=0>A</div> <div key=1>B</div> <div key=2>C</div>

// 在头部插入一项 ‘Z’
const newItems = ['Z', 'A', 'B', 'C'];
newItems.map((item, index) => <div key={index}>{item}</div>);
// 渲染：<div key=0>Z</div> <div key=1>A</div> <div key=2>B</div> <div key=3>C</div>

看到问题了吗？React对比发现：key=0的元素从A变成了Z，key=1从B变成了A……它会认为所有元素都变了，于是可能进行不必要的重新渲染，甚至导致组件状态丢失（比如每个项里有个输入框，输入的内容就错乱了）。

保持状态和性能的关键

如果你用数据本身的唯一ID作为key，情况就完全不同了。

const items = [{id: 101, name: 'A'}, {id: 102, name: 'B'}];
items.map(item => <div key={item.id}>{item.name}</div>);
// 渲染：<div key=101>A</div> <div key=102>B</div>

// 在头部插入一项
const newItems = [{id: 100, name: 'Z'}, {id: 101, name: 'A'}, {id: 102, name: 'B'}];
newItems.map(item => <div key={item.id}>{item.name}</div>);
// 渲染：<div key=100>Z</div> <div key=101>A</div> <div key=102>B</div>

这次React能清晰地识别出：key=101和key=102的元素只是移动了位置，key=100是全新的。它可以高效地复用已有的DOM元素（移动它们），只创建真正的新元素，从而提升性能并保持组件内部状态。

什么时候可以用index作为key？

只有当你的列表是静态的（永远不会重新排序、增删），或者列表项没有自己的状态/身份时，用index才是安全的。比如渲染一个纯粹由静态文本构成的简单列表。但在动态列表中，这几乎总是一个坏主意。

一个实用的比喻：想象你要管理一队学生。用学号（key）点名，无论队伍怎么排，你都能准确认出每个人。如果只用站队的位置（index）点名，队伍一动，你就全乱套了。

所以，key不是用来应付编译器的，而是React协调算法的心脏。花点心思给它一个稳定、唯一的标识，你的列表交互会更流畅，Bug也会更少。