javascript - 为什么 React JS 不自动为动态子项生成 key ？

Question

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

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>
  )
}

我明白为什么他们的 key 在那里。但为什么我必须给他们？不能仅仅分配一个流水号或 UUIDv4 或其他东西来使用react吗？

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

Answer 1

Tl;dr

您需要为与该元素的数据(可能是来自数据库字段的 id 或其他东西)关联的动态元素分配一个唯一键，因为它会停止不必要的重新呈现。这是 React 的主要吸引力，也是它以性能着称的原因。

原因

您需要为动态子项分配一个唯一键，因为这就是 React 的 virtual DOM 的方式。将该元素与特定 数据片段相关联。我认为一个例子可以帮助说明。

假设您有一个包含 1,000 个动态生成的项目的列表。您可以只使用 index从 map 传入的参数函数为这些项目动态分配一个键。但是，如果您想更改这些项目的顺序怎么办——也许按字母顺序对它们进行排序？因为key这些项目没有绑定(bind)到特定的数据片段，而是动态生成的，React 虚拟 DOM 没有办法跟踪这些元素。这意味着它必须重新呈现 所有 1,000 个元素才能更改排序。但是，假设这些项目中的每一个都分配了一个唯一的 ID，该 ID 从数据库中填充。虚拟 DOM 足够聪明，可以看到即使元素的顺序发生了变化，元素本身中的数据仍然是相同的。因此，它将重新呈现没有的元素，尽管它们的顺序已更改。

如果有任何不清楚的地方，一旦您剖析了虚拟 DOM 的真正工作原理，它就完全有意义了。本质上，虚拟 DOM 是实际 DOM 的副本。 React 比较两者并且只重新渲染实际发生变化的部分。这就是 React 获得速度的地方。假设您有一个包含 3 个动态 <Item /> 的列表组件，并且您也在动态生成它们的 key 。

<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 的先前渲染相比发生了变化。它已经完全重新渲染该元素。然后它检查 key 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 的项目的内容是否仍然相同。好吧，内容还是一样的!因此，虽然该元素的顺序不同，但它不会 重新呈现。然后它检查键为 782364 的元素，发现它的内容也是相同的。这也适用于整个列表。

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