[react]#7リストとKey

5140 ワード
React テキストリンク

複数の構成部品をレンダリング


mapメソッドは配列内の要素を遍歴し、コールバックを実行し、新しい変更された配列を返します.この機能を使用して、必要な構成部品をデータでレンダーします.
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Key


Keyは、Reactが変更、追加、または削除するアイテムを決定するのに役立ちます.keyは、安定した一意性を確保するために、アレイ内の領域に指定する必要があります.
キーワードは周囲の配列のコンテキストでのみ意味があるため、経験に基づいてmap()関数の内部のエンティティにkeyを入れることをお勧めします.鍵は配列内の兄弟間で一意である必要があり、範囲全体で一意である必要はありません.2つの異なる配列を作成する場合は、同じキーを使用できます.
キーを選択する最善の方法は、リスト内の他のアイテム間でアイテムを一意に識別できる文字列を使用することです.ほとんどの場合、データのIDは鍵として使用される.
アイテムの順序が変更される可能性がある場合は、キーにインデックスを使用することは推奨されません.避けられない場合は使用できますが、パフォーマンスが低下したり、構成部品のステータスに関連する問題が発生する可能性があります.
👉🏻 IndexではなくユニークIDを使用するのはなぜですか?
👉🏻 差異の例 
function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);
jspmvc/java/controller/servlet/model2
Discovery 2. Cookieは要求に自動的に含まれません.