Question

以下是React的唯一键吗？

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

<span>
    {someArray2.map(function (a, index) {
        return (
                <span key={index}>{a}</span>
        );
    })}
</span>

在这种情况下，循环内嵌的span都将具有相同的密钥，但它们是不同父项的子项。这好吗？

Answer 1

是的，它确实算得上是独一无二的。 React在其协调程序中使用键，以便决定如何以最有效的方式改变DOM。

通常，问题键解决方法是在渲染之间识别同一层次结构（兄弟节点）中的节点。

例如，如果你有：

// render A
<div class='parent'>
  <div>one</div>
</div>

// render B
<div class='parent'>
  <div>two</div>
  <div>one</div>
</div>

在第二个渲染中，没有经济有效的方式来了解<div>one</div>没有改变，我们需要做的就是在它之前添加<div>two</div>。如果<div>one</div>有一个键，通过比较渲染中的键，我们可以知道它在之前的渲染中已经存在，我们需要做的就是之前添加<div>two</div>。

来自反应文档：

请记住，密钥只能在其兄弟姐妹中独一无二，而不是全局唯一

进一步阅读：https://facebook.github.io/react/docs/reconciliation.html#keys

Answer 2

在考虑了这个之后再考虑一下。它确实是唯一的，因为只有兄弟节点才需要唯一性。

但是，在使用数组索引或键时应该小心：数组索引不保证保留元素的顺序。那是因为索引与数组的元素无关。

因此，React会做更多的工作，并且可能搞砸了。

底线是，可用时使用元素id，而不是数组键。

所以使用这个：

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

而不是：

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

此推理为explained very well here，reconciliation algorithm docs也建议使用唯一ID：

在实践中，找到钥匙并不是很难。大多数时候，您要显示的元素已经具有唯一ID。当那个不是这样，您可以为模型添加新的ID属性或散列一些生成密钥的部分内容。

React Key在不同元素上的唯一性

2 个答案: