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

例子：

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

TL;DR 在渲染动态子项时使用唯一键和常量键，否则会发生奇怪的事情。

在使用 React.js 的几周内，我发现的一个棘手方面是了解当组件是子元素数组的一部分时您希望传递给组件的关键属性。并不是您必须指定此属性，除了在控制台上收到此警告外，大多数情况下都可以正常工作：

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

当 React 协调有键的孩子时，它会确保任何有键的孩子都会被重新排序（而不是破坏）或销毁（而不是重用）。起初在我看来，一切都与表现有关，但正如 Paul O'Shannessy 所指出的，它实际上与身份有关。

这里的关键是要了解并非 DOM 中的所有内容都在 React“Virtual DOM”中具有表示，并且因为对 DOM 的直接操作（例如用户更改值或 jQuery 插件监听元素）不会被 React 注意到，而不是使用唯一键和常量键最终会导致 React 在键不恒定时重新创建组件的 DOM 节点（并丢失节点中的任何未跟踪状态）或在键不唯一时重用 DOM 节点来呈现另一个组件（并绑定它的状态到这个其他组件）。

这里有一个现场演示，展示了结果有多糟糕：

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

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

另见

来源

除了创建动态元素之外，React 键的另一个有用用法是在它们的键更改时重置元素，例如，在一个项目中，我有一个<input/>类型的元素，file我希望元素每次都被初始化为其初始值（未选择文件）组件渲染，所以我做了以下事情：

父构造函数：

this.state = {
    fileInputKey: Date.now()
    // other properties
};

该state对象还有其他属性，我只是为了这个例子添加了这个

每次我想要input重置子组件中的元素时，我都会这样做：

this.setState({fileInputKey: Date.now()});

父渲染：

<Child fileInputKey={this.state.fileInputKey}/>

子渲染：

<input key={this.props.fileInputKey} type="file" onChange={this.onSelectFile}/>

另请参阅 React 博客中的此示例：https : //reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-钥匙