渲染列表与 key 的作用

用 map 把一个数据数组转换成屏幕上的一组元素，并用 key 标识每个元素。

8 分钟 · 3 题

界面里到处都是列表：一段对话里的消息、商店里的商品、播放列表里的曲目……你不会手动去复制粘贴标签，而是从一个数据数组出发，用 map 方法来转换它。简单回顾一下：map 会对数组的每个元素应用一个函数，并返回一个包含结果的新数组。

const fruits = ["apple", "banana", "kiwi"];

const upperFruits = fruits.map(function (fruit) {
  return fruit.toUpperCase();
});

console.log(upperFruits);

在 React 里，你做的完全一样，只不过传给 map 的函数返回的是 JSX 而不是一个字符串。React 知道如何显示一个 JSX 元素的数组：它会把它们一个接一个地渲染出来。唯一的要求是给每个元素一个名为 key 的特殊 prop。

function FruitList() {
  const fruits = ["apple", "banana", "kiwi"];

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

key 是干什么用的？它是一个唯一的标签，让 React 在列表发生变化（增加、删除、重新排序）时能认出每个元素，就像寄存处的编号牌一样：没有编号，就没法把正确的外套还给你。多亏了 key，React 只更新真正发生了变化的部分。在实践中，最好的 key 是来自你数据的一个唯一且稳定的标识符，比如一个 id 字段。

const tasks = [
  { id: 1, label: "Buy groceries" },
  { id: 2, label: "Water the plants" },
];

function TaskList() {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.label}</li>
      ))}
    </ul>
  );
}

知识检测

确认你已牢记本课的重点内容。

1. 在 React 中，你用哪个数组方法来渲染列表？
   • push
   • map
   • forEach
2. key 这个 prop 有什么用？
   • 自动按字母顺序对列表排序
   • 用密码保护列表
   • 让 React 能识别列表中的每个元素
3. key 最好用什么值？
   • 来自数据的一个唯一且稳定的标识符
   • 无论何种情况都用元素在数组里的索引
   • 每次渲染时生成的一个随机数