按键可帮助React识别哪些项目已更改，添加或删除。应该为数组内的元素提供键，以赋予元素稳定的标识：

例：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

TL; DR在渲染动态子级时使用唯一键和常量键，或者期望发生奇怪的事情。

在我使用React.js的几周中，我发现了一个棘手的方面之一，就是了解当组件成为子数组的一部分时，您期望将其传递给组件的关键属性。并不是您必须指定此属性，除了在控制台上收到此警告之外，大多数情况下其他事情都会起作用：

数组中的每个子代都应具有唯一的“键”道具。检查未定义的渲染方法。通过阅读链接的文档，很容易看不到这种肯定的含义：

当React调和带键的子代时，它将确保所有带键的子代都将重新排序（而不是破坏）或销毁（而不是重新使用）。起初，我认为这全是关于表现的，但是，正如保罗·奥汉尼斯（Paul
O’Shannessy）所指出的那样，这实际上与身份有关。

这里的关键是要了解不是DOM中的所有内容在React“虚拟DOM”中都具有表示形式，并且因为对DOM的直接操作（例如用户更改值或侦听元素的jQuery插件）没有被React注意到，所以不使用唯一键和常量键将以React在键不是恒定的情况下重新创建组件的DOM节点（并丢失该节点中的任何未跟踪状态）或在键不是唯一的情况下重用DOM节点来渲染另一个组件而结束（并绑定）到其他组件的状态）。

在这里，您将获得一个现场演示，演示结果如何：

http://jsfiddle.net/frosas/S4Dju/

只需添加一个项目，更改它，添加更多项目，然后看看会发生什么。

资源