8:リストとキー

40992 ワード
React 正式な書類 テキストリンク

リストとキー

  • まず、JavaScriptでリストを変換する方法について説明します.
    • const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
  • の例は、map()関数を使用して数値配列の値を2倍にした後、map()が返した新しい配列を2倍の変数に割り当て、ログのコードを表示することです.
  • 結果
  • Reactでは、配列を要素リストとして作成する方法は基本的に同じです.

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

  • ElinMENTコレクションを作成し、JSXにカッコ{}を使用して含めることができます.
    • const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);
  • のJavaScript map()関数を使用して、数値配列を繰り返し実行します.
  • 項目について
  • セグメントを返し、セグメント配列の結果をlistitemsに保存します.
  • listItems配列を
      に含め、DOMにレンダリングします. 
      ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

      結果

      • 既定のリスト構成部品

    • は、通常、構成部品内でリストをレンダリングします.
      以前の例はnumbers配列を受信し、順序のないシンボルリストを出力する素子として再パッケージすることができる.
      • 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」は、リストを作成する際に含める必要がある特殊な文字列ツリーです.
    • キーの重要性について説明します.
    • 現在numbersmap()でリスト内の各項目にキーを割り当てて、キーが欠けている問題を解決します.
      • function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

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

      Key

    • Keyは、Reactが変更、追加、または削除するアイテムを識別するのに役立ちます.
    • キーは、セルに安定した固有性を与えるために、アレイ内部のセルに指定する必要があります.
      • const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);
    • Keyを選択する最善の方法は、リスト内の他のアイテム間でアイテムを一意に識別できる文字列を使用することです.
    • は、ほとんどの場合、鍵としてデータのIDを使用する.
      • const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);
    • でレンダリングされたアイテムに安定したIDがない場合は、最後の手段としてアイテムインデックスを使用できます.
      • const todoItems = todos.map((todo, index) =>
  // 최후의 수단으로만 쓰자
  <li key={index}>
    {todo.text}
  </li>
);
    • アイテムの順序を変更する場合は、キーにインデックスを使用することは推奨されません.
    • は、性能の低下または構成部品の状態に関連する問題を引き起こす可能性がある.
    • リスト項目にキーが明確に指定されていない場合、reactはデフォルトでインデックスをキーとして使用します.

      • キーで構成部品を抽出

    • キーは、周囲に配列されたコンテキストにのみ意味があります.
      • たとえば、ListItem構成部品が抽出された場合、ListItemの
    • 要素は配列内の要素ではなく配列内の要素である必要があります.
    • 鍵使用エラー
      • function ListItem(props) {
  const value = props.value;
  return (
    // 틀렸습니다! 여기에는 key를 지정할 필요가 없습니다.
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 틀렸습니다! 여기에 key를 지정해야 합니다.
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);
    • 正しい鍵の使用方法
      • function ListItem(props) {
  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 맞습니다! 배열 안에 key를 지정해야 합니다.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);
    • の経験によれば、map()関数の内部の要素にキーを加えることが望ましい.

      • Keyは兄弟の間で唯一の値でなければならない。

    • 鍵は、アレイ内の兄弟間で一意である必要があり、範囲全体で一意である必要はありません.
      • 2つの異なる配列
    • が作成されると、同じキーを使用することができる.
      • たとえば、
    • には次のコードがあります.
      • 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')
);
    • の上のコードでは、サイドバーと内容は同じキーを使用します.
    • ビットに示すように、2つの異なる配列では、重複する値をキーとして使用することができる.
    • Reactでは、キーはヒントを提供するが、コンポーネントとして伝達されない.
    • 要素では、キーと同じ値が必要な場合、別の名前のpropに明示的に渡される.
      • const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);
    • ビットの例では、Postコンポーネントはpropsである.idは読み込めますがpropsです.keyは読めません.
    • ですので、必要に応じてIDを明示してください.

      • JSXにmap()を含める


      上記の
    • 例では、個別のlistitems変数が宣言され、JSXに含まれる.
      • function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}
    • JSXを使用すると、カッコにすべての式を含めることができるので、map()関数の結果をインライン処理として使用できます.
      • function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}
    • この方式を使用すると、コードはよりきれいになりますが、乱発はお勧めしません.
    • JavaScriptと同様に、可読性のために、開発者は変数として抽出するか、内蔵するかを直接判断しなければならない.
    • map()関数が重すぎる場合は、素子として抽出することが望ましい.

      • ソース

    • 反応式ドキュメント
    • URLでパラメータを渡す(パラメータもURL)
    Markdown構文