異なる要素の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

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プロパティを追加するか、コンテンツの一部を にハッシュしてキーを生成することができます。