React
Reactでキーを使用する方法とその理由
サーチ…
前書き
Reactコンポーネントのリストをレンダリングするときはいつでも、各コンポーネントはkey
属性を持つ必要があります。キーは任意の値にすることができますが、そのリストに対して一意である必要があります。
Reactがアイテムのリストに変更をレンダリングする必要がある場合、Reactは両方の子リストを同時に繰り返し、違いがあればいつでも突然変異を生成します。子に設定されているキーがない場合、Reactは各子をスキャンします。それ以外の場合、Reactはキーを比較して、リストに追加または削除されたキーを認識します
備考
詳細については、このリンクを参照してキーの使用方法をご覧ください : https : //facebook.github.io/react/docs/lists-and-keys.html
このリンクを参照して、キーを使用することが推奨される理由をお読みください : https : //facebook.github.io/react/docs/reconciliation.html#recursing-on-children
基本的な例
クラスレスのReactコンポーネントの場合:
function SomeComponent(props){
const ITEMS = ['cat', 'dog', 'rat']
function getItemsList(){
return ITEMS.map(item => <li key={item}>{item}</i>);
}
return (
<ul>
{getItemsList()}
</ul>
);
}
この例では、上記のコンポーネントは次のように解決されます。
<ul>
<li key='cat'>cat</li>
<li key='dog'>dog</li>
<li key='rat'>rat</li>
<ul>
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow