翻译自Index as a key is an anti-pattern
许多开发者在渲染一个list时使用item的index当作key
{todos.map((todo,index)=>
<Todo
{...todo}
key={index}
/>
)}
这看起来很优雅，而且确实消除了警告(但是产生警告真正的原因是什么呢?) 这样会不会有什么负面影响呢?
这可能使你的程序崩溃并渲染错误的数据!
key是React中用于标识DOM元素的惟一工具。如果在一个列表中间插入或删除一些数据会发生什么呢? 如果两个组件的key相同，那么React会认为DOM元素中的这两个组件也是同一个。这就开始错了。
注意: 当我使用map函数的索引参数作为映射react组件的键时，我遇到一个大问题。
state是一个对象列表，
容器组件将state的对象列表进行排序，并将其映射到小的ui组件上。
目前一切正常，但是当我向state中添加了一个新的item并重新排序映射时
React对哪些属性该映射到哪个组件感到困惑。这让我对所有我知道的React产生了疑问。
后来我改为使用uuid作为映射组件的键，一切就又正常了
为了演示潜在的问题，我创建了一个简单的示例。
事实证明，当没有设置key时，React会使用index作为key，因为这是目前最好的解决办法。此外，它还会警告您，这不是最优化的解决办法。如果你自己提供一个key，React就会认为你知道你在做什么——记住这个例子——会导致不可预知的结果。
Better
每一个item都应该有一个不变且唯一的属性。理想情况下，应该在创建item时分配给它。当然，我指的就是id，我们可以使用以下方式:
{todos.map((todo)=>
<Todo {...todo}
key={todo.id} />
)}
注意: 首先应该查看item的现有属性，可能它已经存在了可以用作id的属性
一种方法是在抽象(abstraction?)中添加一个编号。使用全局索引可以确保任意两个item具有不同的id。
todoCounter = 1;
function createNewTodo(text){
return {
completed: false,
id: todoCounter++,
text
}
}
Much better
项目的解决方案应该是一个可以分布式创建item的更为健壮的方法，建议使用shortid，它能快速生成“简短的 不连续的 像url一样的(?) 唯一的(short non-sequential url-friendly unique?)”id。代码如下所示:
function createNewTodo(text){
return {
completed: false,
id: shortid.generate(),
text
}
}
为每个item生成一个惟一的id，并在渲染列表时使用它作为key。
更新: 例外情况
很多人问是否所有情况都需要生成id。有些人觉得某些情况下使用index作为key是可以的。
的确，有时候生成新的id是多余的。例如翻译许可条款或贡献者列表。
为了帮助理解，我举出了这些例子的三个共同点:
1. list和item是静态的——它们不会被计算，也不会改变;
2. list中的item没有id;
3. list不会被重新排序或过滤
当同时满足以上条件时，就可以安全地使用index作为key。
更新2: React,Preact,and *react
尽管在这篇文章中我写的是React，但是这个问题并不是唯一的。在类似的库中，比如Preact，问题也依然存在，虽然可能影响不同。
参见下面的StackOverflow问题，移除最后一个元素。同时请注意《Preact》的作者Jason Miller提供的答案。
References and related articles
Dynamic ChildrenandKeyed Fragmentsin React Docs
Explanation from Paul O’Shannessy
The importance of component keys in React.js
React.js and Dynamic Children — Why the Keys are Important
React animations for a single component,sectionThe key is using key
Why you need keys for collections in ReactbyPaul Gray
网友评论