TIL] React-List and Key?

2662 ワード

key React テキストリンク

🌼 Key?

Reactでは、keyがリスト内のアイテムの変更、追加、削除を区別するのに役立ちます.安定したlistを構築するには、配列に各項目を区別するための要素が含まれている必要があります.

最良の方法は、配列要素を用いてitemを区別できる文字列形式の固有idを含み、インデックスとして使用することである.

id는 형제 노드를 구분하기 위한 요소로 해당 list를 구성하는 형제 사이를 구분하면 되며 전체적인 구조에서 유일성을 가질 필요는 없다.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

リストを構成するitemの一意のidがない場合はarrayのindexをキー値として使用できますが、レンダリング時にitemの順序が変更された場合は使用しないほうがいいです.

React에서 key는 DOM 요소들을 구분하기 위해서 사용된다. list의 중간에 item을 추가, 삭제되는 경우에 state 이슈가 발생할 수도 있다.

ステータスの問題を避けるためにはindexは使用しないほうがいいですが、以下の場合に考えられます.

listのアイテムの内容が静的で変更されていない場合、

listの項目にidがない場合、

listの順序が変更されず、再構成されていない場合、

todos.map((todo, index) => (
    <Todo {...todo} key={index} />
  ));
}

出典:React公式サイト、Blog-Robin Pokorny

この問題について(TIL] React-List and Key?), 我々は、より多くの情報をここで見つけました https://velog.io/@link717/TIL-React-List-and-Key

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol