React 列表和 Keys

封面图 • 2025-10-04 • React

在 React 中，**列表（Lists）** 和 **Keys（键）** 是非常重要的概念，尤其是在渲染动态数据时。它们用于高效地更新和操作 DOM 元素。

---

## 🧩 一、React 列表（Lists）

在 React 中，我们通常使用 `map()` 方法来遍历数组并生成一个组件列表。

### 示例：

```jsx
const fruits = ["Apple", "Banana", "Cherry"];

function ListExample() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}
```

> ✅ 注意：`map()` 会返回一个新的数组，每个元素对应一个组件。

---

## 🔑 二、Keys（键）

在 React 中，当你渲染一个列表时，**必须为每个列表项提供一个唯一的 `key` 属性**。这个 `key` 帮助 React 识别哪些元素发生了变化、被添加或被删除，从而提高性能。

### 为什么需要 Keys？

- **性能优化**：React 使用 `key` 来判断哪些元素需要重新渲染。
- **稳定性**：如果没有 `key`，React 可能会以错误的方式更新列表，导致 UI 不一致。

### Key 的要求

- 必须是**唯一**的（在同一个列表中）。
- 不能是 `index`（除非数组是静态的且不会改变）。
- 最好使用数据中的唯一标识符（如 `id`）。

### 正确使用示例：

```jsx
const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
```

---

## ❌ 错误示例（不要用 index 作为 key）

```jsx
{users.map((user, index) => (
  <li key={index}>{user.name}</li>
))}
```

> ⚠️ 如果你对列表进行排序、添加或删除元素，使用 `index` 作为 `key` 可能会导致渲染问题或性能下降。

---

## ✅ 总结

| 项目 | 内容 |
|------|------|
| 列表 | 使用 `map()` 遍历数组生成组件列表 |
| Key  | 每个列表项必须有一个唯一 `key` 属性 |
| 推荐 | 使用数据中的唯一 ID 作为 key，而不是 index |
| 作用 | 提高性能、确保正确更新 |

---

如果你有具体代码或场景，我可以帮你检查 `key` 是否合理或者如何优化列表渲染。

React 列表 和 Keys

React 列表和 Keys