许多时候，我看到开发者在渲染一个列表的时候使用列表项的index（在列表中的位置-1）当作列表项的key属性值。

{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

这似乎看起来很恰当，并且做可以消除react的报错（这可能是我们真正关心的）。
但是，这样做是有问题的。那么问题在哪里？

它可能破坏你的程序，让它展示错误的数据。
我来解释下，key是React 用来唯一标识DOM元素的值。如果你向列表中间位置再加一项，或者在中间位置删除一项会发生什么呢？
如果key值和之前的key值一样，则react会觉得前，这两个key值一样的组件，他们对应的DOM元素也是一样的。但，我们如果使用index当作key值，则前后两个key值一样的组件对应的DOM元素就不一样了。

为了演示潜在的危险，我创建了一个简单的例子

当没有值传给key时，React会自动使用列表项的index当作key的值。这是在编码者没有设置key值的情况下，React自己所能做的一个最好的处理。
React会警告您，它不是最佳的处理方式。如果你有为它设置key值，则React会以你设置的值来当作key值。你如果设错了，React也会照做，因为它爱你非常深沉，相信你！

更佳的处理

每个项应该有一个永久不变的且唯一的属性。理论上，它会在这个项被创建的时候一起生成。哈哈，你也许你猜对了，我讲的就是ID。我们可以这样使用它。

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

注意：你得先看看这些项的属性，你用可以，但至少他们得有id吧？

Index as a key is an anti-pattern