ReactJSのキーの意義は何ですか？

Question

動的に追加されたコンポーネントでキーを使用しないとどうなるか分かります。私はキーを削除し、問題なくレンダリングし、キーの使用に関する警告メッセージを出しただけです。誰かがキーを使用しないと結果がどうなるかの例を挙げてください。

Answer 1

キーヘルプ変更、追加、削除されたアイテムを特定します。ダイナミックな子どもをレンダリングするときにDRを使用するユニークな定数キー、または奇妙なことが起こることを期待する。

const numbers = [1, 2, 3, 4, 5]; 
const listItems = numbers.map((number) => 
    <li key={number.toString()}> 
    {number} 
    </li> 
); 

TL：

例：キーが要素に安定したアイデンティティを与えるために、配列内の要素に与えられるべきです。

私がReact.jsを使用していた数週間の間に見つけた難しい面の1つは、コンポーネントの一部であるコンポーネントに渡すと予想される主要なプロパティを理解することです。このプロパティを指定する必要はありません。ほとんどの場合、コンソールでこの警告が表示されます。

アレイ内の各子には、一意の「キー」小文字が必要です。レンダリングメソッドが未定義であることを確認してください。 リンクされたドキュメントを読むことによって、この肯定の意味が分かりにくい場合があります。

キーを持つ子をリコンサイルすると、キーを持つすべての子が確実に並べ替えられます（clobberedではなく）再使用される）。 最初はそれはパフォーマンスに関するものだったが、Paul O'Shannessyが指摘したように、それは実際にアイデンティティに関するものだった。

ここでの鍵は、React "Virtual DOM"内にDOMのすべての表現があるわけではなく、DOMの直接操作（値を変更するユーザーや要素を聴くjQueryプラグインなど）が気付かれないためです。特定のキーと定数キーを使用しないReactは、キーが一定でないときにコンポーネントのDOMノードを再作成し、キーが見つからないときにDOMノードを再利用して別のコンポーネントをレンダリングします一意である（およびその状態をこの他のコンポーネントに結び付ける）。ここで

あなたは結果がどのようにひどい示すライブデモがあります。

http://jsfiddle.net/frosas/S4Dju/

だけで項目を追加、それを変更し、より多くの項目を追加し、何が起こるかを参照。

またsee

Source