React
Reactでキーを使用する方法とその理由

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript

前書き

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