渲染列表

从数组中渲染数据

假设你有一组内容。

<ul>
  <li>Creola Katherine Johnson：数学家</li>
  <li>Mario José Molina-Pasquel Henríquez：化学家</li>
  <li>Mohammad Abdus Salam：物理学家</li>
  <li>Percy Lavon Julian：化学家</li>
  <li>Subrahmanyan Chandrasekhar：天体物理学家</li>
</ul>

这些列表项之间唯一的区别是它们的内容，也就是它们的数据。在构建界面时，你经常需要使用不同的数据来显示同一个组件的多个实例：从评论列表到个人资料图片画廊。在这些情况下，你可以将这些数据存储在 JavaScript 对象和数组中，并使用像 map() 和 filter() 这样的函数从中渲染组件列表。

下面是一个简短示例，说明如何从数组生成项目列表：

1. 把 数据移动到数组中：

const people = [
  'Creola Katherine Johnson：数学家',
  'Mario José Molina-Pasquel Henríquez：化学家',
  'Mohammad Abdus Salam：物理学家',
  'Percy Lavon Julian：化学家',
  'Subrahmanyan Chandrasekhar：天体物理学家'
];

2. 使用 map() 将 people 成员映射到一个新的 JSX 节点数组 listItems：

const listItems = people.map(person => <li>{person}</li>);

3. 从 你的组件中返回用 <ul> 包裹的 listItems：

return <ul>{listItems}</ul>;

结果如下：

请注意，上面的沙盒显示了一个控制台错误：

你将在本页后面学习如何修复这个错误。在此之前，让我们先为你的数据添加一些结构。

过滤数组中的项目

这组数据可以组织得更加结构化。

const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'mathematician',
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chemist',
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'physicist',
}, {
  id: 3,
  name: 'Percy Lavon Julian',
  profession: 'chemist',
}, {
  id: 4,
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
}];

假设你想只显示职业是 'chemist' 的人。你可以使用 JavaScript 的 filter() 方法只返回这些人。这个方法接收一个项目数组，让它们通过一个“测试”（一个返回 true 或 false 的函数），并返回一个只包含通过测试（返回 true）的项目的新数组。

你只想要 profession 是 'chemist' 的项目。这个“测试”函数看起来像 (person) => person.profession === 'chemist'。下面是如何把它组合起来：

1. 通过在 people 上调用 filter()，按 person.profession === 'chemist' 过滤，创建 一个只包含“化学家”的新数组 chemists：

const chemists = people.filter(person =>
  person.profession === 'chemist'
);

2. 现在对 chemists 进行 map：

const listItems = chemists.map(person =>
  <li>
     <img
       src={getImageUrl(person)}
       alt={person.name}
     />
     <p>
       <b>{person.name}:</b>
       {' ' + person.profession + ' '}
       known for {person.accomplishment}
     </p>
  </li>
);

3. 最后，从你的组件中返回 listItems：

return <ul>{listItems}</ul>;

const listItems = chemists.map(person =>
  <li>...</li> // 隐式返回！
);

const listItems = chemists.map(person => { // 花括号
  return <li>...</li>;
});

使用 key 保持列表项顺序

请注意，上面的所有沙盒在控制台中都显示了一个错误：

你需要给每个数组项一个 key——一个字符串或数字，用来在该数组的其他项中唯一标识它：

<li key={person.id}>...</li>

keys 告诉 React 每个组件对应数组中的哪一项，这样它之后才能把它们匹配起来。如果你的数组项可能移动（例如由于排序）、被插入或被删除，这一点就很重要。一个选择良好的 key 能帮助 React 推断到底发生了什么，并对 DOM 树进行正确的更新。

与其动态生成 key，不如把它们包含在你的数据中：

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

key 从哪里来

不同的数据来源会提供不同来源的 keys：

• 来自数据库的数据： 如果你的数据来自数据库，你可以使用数据库键/ID，它们本身就是唯一的。
• 本地生成的数据： 如果你的数据是在本地生成并持久化的（例如记事应用中的笔记），在创建项目时使用递增计数器、crypto.randomUUID() 或像 uuid 这样的包。

keys 的规则

• Keys 在同级元素之间必须唯一。 但是，在_不同_数组中的 JSX 节点使用相同的 keys 是可以的。
• Keys 不能改变，否则它们的作用就失效了！不要在渲染时生成它们。

为什么 React 需要 keys？

想象一下，如果你桌面上的文件没有名称。取而代之的是，你只能按照它们的顺序来指代它们——第一个文件、第二个文件，依此类推。你可能会慢慢习惯，但一旦你删除了一个文件，事情就会变得混乱。第二个文件会变成第一个文件，第三个文件会变成第二个文件，依此类推。

文件夹中的文件名和数组中的 JSX keys 起着类似的作用。它们让我们能够在同级项之间唯一地识别某一项。一个选择良好的 key 提供的信息比数组中的位置更多。即使由于重新排序导致_位置_发生变化，key 也能让 React 在其整个生命周期中识别该项。