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

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