在编写 ReactJS 代码时，我必须为动态子项提供键。例如：

render() {
  const {options} = this.state
  const availableOptions = options.map(opt => {
    return (
      <option key={opt.id} value={opt.id}>{opt.displayValue}</option>}
    )
  }

  return (
    <select onChange={this._onOptionSelect}>
      {availableOptions}
    </select>
  )
}

我明白为什么钥匙在那里。但为什么要I必须给他们吗？无法做出反应，只分配一个运行号或 UUIDv4 或其他东西？

相关文档：http://facebook.github.io/react/docs/multiple-components.html#dynamic-children http://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Tl;dr

您需要为与该元素关联的动态元素分配一个唯一的键data（可能是数据库字段中的 ID 或其他内容）因为它会停止不必要的重新渲染。这是 React 的主要吸引力，也是它以其性能而闻名的原因。

Reason

您需要为动态子项分配一个唯一的键，因为这就是 React 的方式虚拟DOM http://facebook.github.io/react/docs/advanced-performance.html将该元素与specific一条数据。我认为一个例子有助于说明。

假设您有一个包含 1,000 个动态生成的项目的列表。你could只需使用index参数是从传入的map函数动态地为这些项目分配一个键。但是，如果您想更改这些项目的顺序（也许按字母顺序排序）怎么办？因为key这些项目并不绑定到特定的数据，而是动态生成的，React 虚拟 DOM 无法跟踪这些元素。这意味着它必须重新渲染all1,000 个元素只是为了更改排序。但是，假设每个项目都分配了一个从数据库填充的唯一 ID。虚拟 DOM 足够聪明，可以看到即使元素的顺序发生了变化，元素本身的数据仍然是相同的。因此，它会重新渲染none元素的顺序，尽管它们的顺序发生了变化。

如果其中任何一个不清楚，那么一旦您剖析了虚拟 DOM 的实际工作原理，就会完全明白了。本质上，虚拟 DOM 是实际 DOM 的副本。 React 会比较两者，并且仅重新渲染实际更改的内容。这就是 React 获得速度的地方。假设您有 3 个动态列表<Item />组件，并且您还动态生成它们的密钥。

<Item key="1">Banana</Item>
<Item key="2">Orange</Item>
<Item key="3">Apple</Item>

现在，如果您按字母顺序重新排序这些项目，它们的键也将动态重新分配。

<Item key="1">Apple</Item>
<Item key="2">Banana</Item>
<Item key="3">Orange</Item>

此时，React 会比较键 1 的内容，看看它与键 1 的先前渲染相比是否发生了变化。它已经改变了，因此它完全重新渲染了该元素。然后它检查密钥 2。它的内容也发生了变化，因此会被重新渲染。整个列表都是如此。

现在假设每个项目都有一个在数据库中与其关联的唯一 ID，并且您将其指定为键。

<Item key="782364">Banana</Item>
<Item key="434533">Orange</Item>
<Item key="834535">Apple</Item>

现在我们按字母顺序重新排序该列表：

<Item key="834535">Apple</Item>
<Item key="782364">Banana</Item>
<Item key="434533">Orange</Item>

此时，React 将检查密钥为 834535 的项目的内容是否仍然相同。嗯，内容are还是一样！因此，虽然该元素的顺序不同，但它是not重新渲染。然后检查key为782364的元素，发现其内容也相同。这也适用于整个列表。

在一个小列表中，您可能不会注意到动态生成的键与直接与该元素的数据绑定的键之间的区别，对于大型列表，性能优势是huge。这确实是 React 的主要吸引力——非常智能的重新渲染。