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

🔑 なぜkeyに与えたのか
順序が固定されていない場合は、順序を保証するために、各要素にキー値を特殊な値として使用する必要があります.reactは1つ前に押して、後ろに1つ置くだけですが、簡単なルールは分かりません.ただ身長も値段も違うと思って変えました.
配列順序や内容が変わらない場合は、任意のキーを使用できます.
keyヘルプリアクターは、アイテムを変更、追加、または削除するときに識別します.

  const [inputValue, setInputValue] = useState('');
  const [commentList, setCommentList] = useState([]);

const onButtonClick = () => {
     e.preventDefault();
     if (inputValue === '') {
       return;
     }
     setCommentList(commentList => [...commentList, inputValue]);
    
  };

const Comment = props => {
  return props.commentList.map((comment, index) => (
    <li className="comment" key={index}>
      <div className="comment-left">
        <span className="comment-id">smileDay01</span>
        <span className="comment-content">{comment}</span>
      </div>
      <div className="comment-right">
        <button className="comment-like">
          <i className="fa-icon fa-regular fa-heart" />
        </button>
        <button className="comment-delete">
          <i className="fa-solid fa-trash-can" />
        </button>
      </div>
    </li>
  ));
};

私のコード.map関数に渡されるコールバック関数の因数index値を用いた.まず、実行にエラーは発生しませんでしたが、indexを使用している場合、配列変更の再レンダリング効率が低下していることがわかり、修正しました.(これにより、パフォーマンスが低下したり、ステータスに関連する問題が発生する可能性があります.)

 const [inputValue, setInputValue] = useState('');
 const [commentArr, setCommentArr] = useState([]);

const onFormSubmit = e => {
    e.preventDefault();
    const commentNewArr = [...commentArr];
    if (inputValue !== '') {
      commentNewArr.push({
        id: Date.now(),
        userId: 'smileDay01',
        comment: inputValue,
      });
      setCommentArr(commentNewArr);
    }
    setInputValue('');
  };

const Comment = ({ commentArr }) => {
  return commentArr.map(e => {
    return (
      <li className="comment" key={e.id}>
        <div className="comment-left">
          <span className="comment-id">{e.userId}</span>
          <span className="comment-content">{e.comment}</span>
        </div>
        <div className="comment-right">
          <button className="comment-like">
            <i className="fa-icon fa-regular fa-heart" />
          </button>
          <button className="comment-delete">
            <i className="fa-solid fa-trash-can" />
          </button>
        </div>
      </li>
    );
  });
};

整理して、反応が自動的に生成されるタグであれば、追跡タグが必要ですが、追跡の根拠が必要です.それによってkeyという約束道具が与えられ、反応器が性能を高め、正しい動作をしたと考えられる.
また、ステータスでは、配列は変更、変更に直接アクセスするのではなく、push、concatなどの配列内蔵関数を使用して新しい配列を作成し、新しいステータスに設定する必要があります.