[react]map関数を使用して、複数の構成部品をレンダリングするときにキーを含める必要がある理由

React公式文書
ポプラの木
もちろん、map関数を使用して複数の構成部品をレンダリングするときにkeyが含まれていない場合は、警告ウィンドウが表示されるため、keyが含まれて警告ウィンドウが除去されます.
でもどうして?!!!必ず入れますか?
これはreactが効率的に再レンダリングできるため、パフォーマンスに大きな役割を果たすためです.
例
もし[‘a’,‘b’,‘c’,‘d’]があれば
「b」を削除すると
キーがない場合
「a」->「a」、「b」->「c」、「c」->「d」、「d」->「削除」に変更します.
各キーの名前を付けないと、どのキーが削除され、どのキーが変更されるか分からないからです.
キーがある場合

  const feed1Comment = [
    {
      nickName: 'tjdgus05',
      commentText: '이쁘다~~',
      commentId: 1,
      heartActive: true,
    },
    {
      nickName: 'ria',
      commentText: '하늘이 정말 이뻤네~',
      commentId: 2,
      heartActive: false,
    },
    {
      nickName: 'peter',
      commentText: '오늘 나갔었구나',
      commentId: 3,
      heartActive: false,
    },
  ];

{comments.map((comment, i) => (
         <Comment
           onHeartClick={onHeartClick}
           onDeleteComment={onDeleteComment}
           comment={comment}
           key={i}
         />
))}

これによりキー値が与えられ,Reactはどの要素が削除され,どの要素が修正されていないかを正確に識別できる.
これにより、変更されていない部分は保持され、変更された部分のみがレンダリングされます.私たちが考えているように、必要な部分だけがレンダリングされます.
なぜindexを鍵として使用できないのか
reactがDOM要素を識別する唯一の方法はkeyを通過することである.
ただし、keyを指定しない場合はindexをkeyとして使用します.
keyを使用していないときにすべてのエンティティを変更するのとは、パフォーマンスが著しく異なることがわかります.
また、もっと大きな問題は、私たちの反応が私たちが想像していたように変化しないかもしれないということです.
新しいitemを追加または削除すると、私が考えているitemが削除されない可能性があります.他のitemは修正され、消えているように見えます.また、この状態でsortを行うとreactは本当にカオスなcarosになります.その地図を見せて、今私はカオスのカオスになることができます.
(Robin Pokorny’s) Index as a key is an anti-pattern詳細はこちら
Index as a keyは逆モードの例ですitemを直接追加して、何が問題なのか見てみましょう.次にindexではなくkeyで一意の値を無条件に使用してみましょう.
keyの場合

keyはhtml idとは異なり、兄弟間の一意の値のみが必要

好鍵(Robin Pokorny推奨方法)

item作成フェーズ作成id

let itemId = 1;

const createItem = (text) => {
id: itemId++,
text
}

idをnanoidにする方法<-ポジティブ推奨方法

import { nanoid } from 'nanoid';

const createItem = (text) => {
id: nanoid(),
text

keyを作成する必要はありません.
しかし、決して変化しない素子をマッピングする場合は、keyをindexとして使用できるかどうか注意します.
Robin Pokorny氏は、実際には、以下の3つの状況を満たすと、indexをキーとして使用するのも安全だと述べた.
1.リストまたはアイテムが静的で、計算または変更しない場合
2.リストの項目にidがない場合(idがあれば勝手に書いているようです)
3.リストが絶対に再配置やフィルタリングされない場合
n/a.結論

ほんと、鍵が要らないように見える時以外は(事実上、絶対的な時はない…)

固有値をキーに置いて使いましょう:)これで少なくともエラーが発生する変数が1つ消えてしまいます!いいですね.