Key(キー)の重要性
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 36/42。
map から返されるすべての要素には、そのアイテムの一意で安定したラベルである key が必要です:
{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}なぜでしょうか?配列が変更されると、Reactは新しいリストと古いリストを比較します。`key` はどの項目がどれであるかを識別させるため、エレメントを再構築する代わりに移動させることができ、状態、フォーカス、アニメーションをそのまま維持します。
最適な key: データに含まれる本物の id。推奨: アイテムごとに一意で安定している任意の値(果物の名前など)。最終手段: 配列のインデックス。位置は識別子ではないため、並び替えで問題が発生します。
自分で試してみよう
このレッスンにはコードチャレンジは含まれていません。
このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。