Index as a key is an anti-pattern in React （索引作为key 是一种特别不好的方式）

自己阅读并翻译了一下，原文链接：https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

我经常看到开发人员在呈现列表时都在使用 item 的 index 作为 key。

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

看起来代码很漂亮，而且没啥警告。。。然而，这背后有什么问？？？

这可能会影响到你的应用程序并且在列表里展示出错误的数据。

为什么呢？key 是 React 用来标识 DOM 元素唯一性的东西。如果将某个 item 推到 list 里面，或者从 list 中删除某个 item，会发生什么？如果 key 与 React 之前相同，则会假定 DOM 元素表示与之前相同的组件。但实际上不是这个样子的。

大概意思是，当我用 index 作为key，map 的list 就出了问题，后来用了 uuid 作为 key就好了。
为了证明，我写了个简单的例子，附上了源代码。
react maplist

结果表明，当没有传递值给 key 的时候，react 自己默认会用index 作为 key，这是目前最好的猜测。然后，react 会在控制台给出一个 warning。如果你提供了这个 key，React 就会认为你知道他自己在做什么。记住这个会导致不可预知结果的例子。

好的是（这样做）

每一个 item 都应该有一个永久和唯一的属性。在理想情况下，在创建的时候赋值给 key。当然，赋值一个 id 给 key：

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

注意的是，首先查看map 的 list 的数据，有可能里面就提供了作为 id 的东西。最糟糕的情况下再使用 index，最好是自己生成一个独一无二的 id

一种做法是将number 编号向上挪一位。使用全局的 index 确保任何两个 item 具有独一无二的 id

todoCounter = 1;
function createNewTodo(text) {
  return {
    completed: false,
    id: todoCounter++,
    text
  }
}

好的是（这样做）

生产方案里面应该使用更好的（更健壮的）方法来处理项目的分布式创建。为此，我推荐用 shortid，它可以快速生成”短的、非顺序性的、独一无二的“id。代码如下

var shortid = require('shortid');
function createNewTodo(text) {
  return {
    completed: false,
    id: shortid.generate(),
    text
  }
}

balabala....任何情况下都用独一无二的 id，强制要求自己，没有就自己生成（vue.js 里面也是一样的）