React リストとキー

React では、リストとキーは、要素のコレクションを効率的にレンダリングし、再レンダリングしてもそのアイデンティティを維持するために不可欠な概念です。簡潔な概要は次のとおりです:

リスト

複数の項目をレンダリングする必要がある場合は、通常、配列をマップしてコンポーネントのリストを作成します。基本的な例を次に示します:

const fruits = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

キー

キーは、どの項目が変更、追加、削除されたかを React が識別するのに役立ちます。これらは兄弟間で一意である必要がありますが、グローバルに一意である必要はありません。キーは安定している必要があります。つまり、レンダリング間でキーが変更されるべきではありません。一般的な方法は、ID:
などのデータの一意の識別子を使用することです。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

ベストプラクティス

• 一意の ID を使用します: データに一意の ID がある場合は、常にそれをキーとして使用します。
• 配列インデックスの使用を避ける: インデックスをキーとして使用すると、特にリストが変更される可能性がある場合、再レンダリング中にコンポーネントの状態とパフォーマンスに問題が発生する可能性があります。
• キーの一貫性を保つ: リストを並べ替えたりフィルタリングする場合は、不必要な再レンダリングを防ぐためにキーが同じままであることを確認してください。

これらのガイドラインに従うことで、React アプリケーションで効率的で動的なリストを作成できます!

以上がReact リストとキーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。