小编典典

为什么ReactJS不自动为动态子代生成密钥？

reactjs

在编写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>
  )
}

我知道为什么他们的钥匙在那里。但是为什么我必须给他们呢？仅分配一个运行号码或UUIDv4或其他内容就无法做出反应吗？

阅读 202

2020-07-22

共1个答案

小编典典

l

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

原因

您需要为动态子代分配唯一的键，因为这是React的虚拟DOM将该元素与特定数据段关联的方式。我认为一个例子将有助于说明。

假设您有1000个动态生成的项目的列表。您可以只使用index从map函数传入的参数为这些项目动态分配键。但是，如果您想更改这些项目的顺序-
也许可以按字母顺序对它们进行排序？因为key这些项目上的并不与特定数据绑定，而是动态生成的，所以React虚拟DOM无法跟踪这些元素。这意味着它必须重新渲染
所有
1,000个元素只是为了改变排序。但是，假设每个项目都有一个唯一的ID，该ID是从数据库填充的。虚拟DOM足够聪明，可以看到即使元素的顺序已更改，元素本身中的数据仍然相同。因此，即使它们的顺序已更改，也不会重新渲染
任何元素。

如果有任何不清楚的地方，那么当您剖析虚拟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的项目内容是否仍然相同。好了，内容都还是一样的！因此，即使该元素获得不同的顺序，也不会
重新呈现它。然后，它使用键782364检查该元素，并发现其内容也相同。这对于整个列表也将继续。

在较小的列表中，您可能不会注意到动态生成的密钥与直接绑定到该元素的数据的密钥之间的区别，对于较大的列表，性能收益是 巨大的
。这确实是React的主要吸引力-非常聪明的重新渲染。

2020-07-22