面试题：React中使用Map方法生成列表时如何处理key值

Question

在React应用里，使用Map方法生成一个列表，例如有一个数组const items = [1, 2, 3, 4]，请使用Map方法将其渲染为一个无序列表，并且阐述为什么要给列表项添加key值，以及key值的选取原则是什么。

Answer 1

代码实现

import React from 'react';

const items = [1, 2, 3, 4];

function App() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

export default App;

为什么要给列表项添加 key 值

1. 帮助 React 识别哪些元素改变了：当列表中的数据发生变化时，React 需要高效地更新 DOM。通过 key，React 可以快速确定哪些列表项是新的、哪些被修改、哪些被删除，从而最小化 DOM 操作，提高渲染性能。
2. 保持列表项的状态：比如在一个包含输入框的列表中，每个输入框都有自己的输入状态。如果没有 key，当列表重新渲染时，React 可能会混淆输入框的状态，导致用户输入丢失或错乱。而 key 可以让 React 正确地识别每个列表项，维持其独立的状态。

key 值的选取原则

1. 唯一性：在同一级列表中，每个 key 值必须是唯一的。如果使用数组的索引作为 key，当数组元素的顺序发生变化时，可能会导致 React 做出错误的 DOM 操作，因为索引会随着元素位置的改变而改变。所以一般优先使用数据中具有唯一性的标识作为 key，比如数据库中的 ID。
2. 稳定性：key 值应该在列表项的生命周期内保持稳定。避免使用会频繁变化的值作为 key，否则 React 会认为列表项被删除并重新创建，这会导致不必要的性能开销。