Question

我已阅读somewhere，应该使用此

{someArray.map(function (element) {
  return (
    <span key={element.id}>{element.name}</span>
  );
})}

而不是

{someArray.map(function (element, key) {
  return (
    <span key={key}>{element.name}</span>
  );
})}

显然，原因是key不一定保留数组元素的顺序，因为它不与数组元素“绑定”。

因此，显然，React需要做的工作比使用元素id element.id时更多，并可能搞砸了渲染元素的顺序。

The docs似乎与上述内容相符：

在实践中，找到钥匙并不是很难。大多数时候，您要显示的元素已经具有唯一ID。

作为一直使用key的人，我有一些证据表明我不应该这样做。

有没有人有例子？或者有没有人对两个块进行基准测试，看看它们是否在性能方面有所不同？

Answer 1

做了一些研究第二种方法是好的当React协调关键儿童时，它将确保任何有钥匙的孩子将重新排序（而不是被破坏）或被破坏（而不是重复使用）。密钥应该是稳定的，可预测的和唯一的。不稳定的密钥（如Math.random（）生成的密钥）将导致不必要地重新创建许多节点，这可能导致性能下降和子组件中的丢失状态。

我应该使用什么作为映射数组元素的唯一标识符？

1 个答案: