React 列表 & Keys

React 列表 & Keys

在 React 中，处理列表数据是构建用户界面时的常见需求。无论是展示一个待办事项列表，还是显示一组用户信息，理解如何使用列表和键（keys）都是至关重要的。本文将深入探讨 React 中列表和键的概念、用法，以及最佳实践。

列表渲染

在 React 中，渲染列表数据通常涉及到将一个数组映射到一个组件集合。这可以通过使用 JavaScript 的 map 方法来实现。map 方法遍历数组中的每个元素，并返回一个新数组，其中包含对原始数组元素执行特定操作后的结果。

例如，假设我们有一个数组 numbers，我们想要为每个数字渲染一个列表项：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

在上面的代码中，map 方法被用来为 numbers 数组中的每个数字创建一个 li 元素。每个 li 元素都有一个独特的键（key），这是 React 用于追踪列表中元素身份的标记。

键（Keys）

在 React 中，键（keys）是用于帮助识别哪些项已更改、添加或删除的特殊字符串属性。键应该给数组中的每个元素一个稳定的、唯一的身份标识。

选择键的最佳实践