レンダーアレイ(Render Array)

4121 ワード

各要素には、個別のキー支柱が必要です.
例)id値をキー値

に設定.

がインデックスをプライマリ・キーに割り当てないでください.コンソールウィンドウでは、警告文だけが消えますが、パフォーマンスは改善されません.

keyのキャラクター
各要素の一意の値をスケールしてレンダリングのパフォーマンスを最適化

const arr = [1, 2, 3, 4];
arr.map(item -> <div>{item}</div>);

キーがない場合、アレイに新しい要素が追加された場合([1, 2, 5, 3, 4])<div>3</div>ビット、<div>4</div>ビット、<div>4</div>が新たに生成された.
従来の要素が変わらないわけではなく、<div>5</div>が新たに発生した.

const arr = [
  {id: 0, num: 1},
  {id: 1, num: 2},
  {id: 2, num: 3},
  {id: 3, num: 4},
];
arr.map(item -> <div key={item.key}>{item.num}</div>);

配列に新しい要素が追加されると([ {id: 0, num: 1}, {id: 1, num: 2}, {id: 5, num: 5}, {id: 2, num: 3}, {id: 3, num: 4}, ];)、新しい要素のみが追加されます.

ユニークな値をキーに設定すると、どのオブジェクトを正確に指すかがわかるため、有効な更新が可能になります.

配列の値が多く、頻繁に変更される場合は、indexをキーとして使用することは避けてください.

この問題について(レンダーアレイ(Render Array)), 我々は、より多くの情報をここで見つけました https://velog.io/@green9930/배열-렌더링하기

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

Collection and Share based on the CC Protocol