如何在 React 中显示列表

你有一个项目列表。现在你只需要将它们显示在屏幕上。

“React 方式”渲染列表是什么？

好消息是这很简单。你只需要 Array.map。

非 React 方式渲染列表

如果你还不习惯函数式编程，那么渲染列表的第一个想法可能是创建一个新数组，然后遍历列表并将 JSX 元素推入其中。 像这样

function NonIdiomaticList(props) {
  // Build an array of items
  let array = [];
  for(let i = 0; i < props.items.length; i++) {
    array.push(
      <Item key={i} item={props.items[i]} />
    );
  }

  // Render it
  return (
    <div>
      {array}
    </div>
  );
}

这可行，但需要很多行代码才能完成任务。让我向你展示一个更好的方法 – 在 React 中渲染列表的惯用方式。

React 方式渲染列表

此组件使用 Array 的内置 map 函数创建一个新数组，该数组具有相同数量的元素，并且每个元素都是调用你提供的函数的结果。

function IdiomaticReactList(props) {
  return (
    <div>
      {props.items.map((item, index) => (
        <Item key={index} item={item} />
      )}
    </div>
  );
}

关于 key Prop 的说明

你可能已经注意到我在上面的两个示例中都使用了项目的数组索引作为 key prop。 但实际上这在所有情况下都不是一个好主意，我会告诉你原因。

（对于 key 的最佳选择是项目唯一的 ID，如果它有的话。）

React 依赖于 key 来识别列表中的项目。 请记住，React 使用虚拟 DOM，并且它只会重绘自上次渲染以来发生更改的组件。

第一次渲染像 IdiomaticReactList 这样的组件时，React 会看到你想渲染一堆项目，并且它将为它们创建 DOM 节点。

下次 渲染该组件时，React 会说：“我已经在屏幕上有一些列表项 - 这些项是否不同？” 如果它可以判断这些项目是相同的，它将避免重新创建 DOM 节点。

但这里重要的是：React 无法通过简单的相等性检查来判断，因为每次创建 JSX 元素时，它都是一个全新的对象，与旧的对象不相等。

因此，这就是 key prop 的用武之地。 React 可以查看 key 并知道，是的，即使此 <Item> 严格来说不 === 旧的 <Item>，但它实际上 是 相同的，因为 key 是相同的。

这导致了几个关于 key 的规则。 它们必须是

• 唯一的 – 列表中的每个项目必须具有唯一的 key。 因此，例如，person.firstName 将是一个糟糕的选择（可能不是唯一的）。

和

• 永久的 – 项目的 key 在重新渲染之间不得更改，除非该项目不同。 因此，Math.random 是 key 的一个糟糕选择（每次都会更改……并且 它可能不是唯一的（尽管几率很小））

回到手头的问题：为什么项目的数组索引并不总是 key 的一个好选择？ 它似乎是唯一的和永久的……

如果你确定项目列表是静态的，那么数组索引是一个不错的选择。

但另一方面，如果这些项目在某个时候可能被重新排序，那将导致奇怪的渲染错误。 如果列表可以排序，或者你可能会用新项目替换项目（例如，从服务器获取新列表），则事情可能无法按预期渲染。 考虑一下在这些情况下会发生什么：一个新项目替换了索引“0”处的项目，但对于 React 来说，该项目没有更改，因为它仍然被称为“0”，因此它不会重新渲染。

因此，一般规则是，如果你的列表项具有某种唯一的 id 属性，请将其用作你的 key。

一切都是列表

据说大多数 Web 应用程序只是事物列表。 歌曲 (Spotify)、想法 (Twitter)、活动 (Toggl)。

现在你知道如何在 React 中渲染列表了。 这有点意味着你现在可以编写任何你想要的应用程序了。

如何在 React 中显示列表 最初由 Dave Ceddia 于 2018 年 8 月 6 日在 Dave Ceddia 发布。