なぜmap関数を適用するときにキーpropsを与えるのか

🔑 key

反応公式文書を見ると、このように定義されています.
keyは、反応器がどの項目を変更、追加、または削除するかを識別するのに役立ちます.装飾に安定した固有性を与えるためには、アレイ内部の装飾に指定しなければならない.
すなわち,反応が自動的に生成されるtagであれば,反応は追跡すべきであるが,追跡には根拠が必要である.つまり、反応器keyに付与された約束道具によって、反応器は性能を向上させ、動作するので、我々の協力が必要である.したがって、keyに値を割り当てる必要があります.
今日見たコードにもmap関数にキー値が付いていて、性能と動作の向上に役立ちました!(ハハ)

import React from "react";

const Comment = ({ arr }) => {
  return (
    <ul className="comments">
      {arr.map(e => {
        return (
          <li className="comment" key={e.id}> //key값
            <h1 className="commentUserId">{e.userid}</h1>
            <h1 className="userComment">{e.comment}</h1>
            <button className="deleteBtn">삭제</button>
          </li>
        );
      })}
    </ul>
  );
};

export default Comment;

westagramを実施する際,コメント付加機能では,コメントリストをコンポーネントとしてmap関数を用いてコメントのコードを実現した.li태그を繰り返す必要があるため、map関数を適用すると、コメントのたびにliが追加される.
プロジェクトの順序が変更される可能性がある場合は、keyでインデックスを使用することは推奨されません.その使用は、性能の低下または素子のstateに関連する問題を引き起こす可能性がある.
私は実際にキー値をインデックスに与えてもあまり変化はありませんが、コメント実装では順番にコメントする必要があるので、keyを固有値として与え、まず固有値Date now()関数でid値を与え、それからkey値に設定します.