反应列表和键

在 React 中，列表和键是有效渲染元素集合并在重新渲染时保持其身份的基本概念。以下是简要概述：

列表

当您需要渲染多个项目时，通常会映射一个数组来创建组件列表。这是一个基本示例：

const fruits = ['Apple', 'Banana', 'Cherry'];

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

按键

键帮助 React 识别哪些项目已更改、添加或删除。它们在兄弟姐妹中应该是唯一的，但不需要是全局唯一的。关键点应该是稳定的，这意味着它们不应在渲染之间发生变化。常见的做法是使用数据中的唯一标识符，例如 ID：

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>
  );
}

最佳实践

• 使用唯一 ID：如果您的数据具有唯一标识符，请始终将其用作密钥。
• 避免使用数组索引：使用索引作为键可能会导致重新渲染期间组件状态和性能出现问题，尤其是在列表可能发生变化的情况下。
• 保持键一致：如果您重新排序或过滤列表，请确保键保持相同，以防止不必要的重新渲染。

通过遵循这些指南，您可以在 React 应用程序中创建高效的动态列表！

以上是反应列表和键的详细内容。更多信息请关注PHP中文网其他相关文章！