第3天 #100DaysOfCode — 在 React 中理解列表渲染和条件渲染

Source: Dev.to

React 中的列表渲染

列表渲染 是在 UI 中动态显示一组数据（例如产品、用户信息、消息或菜单项）的过程。在 React 中，通常使用 map() 函数来实现。

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

return (
  

    {users.map(user => (
      - {user.name}

    ))}
  

);

为什么 key 很重要

渲染列表中的每个元素都需要一个 唯一的 key。key 帮助 React：

• 区分不同的元素。
• 在不重新渲染整个列表的情况下，高效地更新或移除元素。

专业提示： key 应该是 唯一且稳定 的。常见的做法是使用 id、工号或任何不会随时间变化的值。除非列表是静态且不会改变，否则不要使用数组索引作为 key。

使用 map() 是符合 React 思想的做法。虽然 for 循环也能渲染列表，但往往更复杂且可读性差。

React 中的条件渲染

条件渲染 允许你根据特定条件显示或隐藏元素。这在需要动态变化的用户界面中尤为有用。

示例：根据用户的认证状态显示仪表盘或登录/注册页面：

function AuthPage({ isLoggedIn }) {
  return (
    
      {isLoggedIn ?  : }
    
  );
}

你可以对以下内容应用条件：

• 单个元素。
• 整个页面或组件。

使用场景包括：

• 仅对未登录的用户显示登录/注册页面。
• 显示错误信息或成功通知。
• 根据用户角色或权限切换 UI 功能。

条件渲染确保你的 UI 动态、响应式且以用户为中心。

关键要点

• 列表渲染 使用 map() 将数组转换为 JSX 元素。
• 为每个列表项始终提供 唯一的 key，帮助 React 高效追踪变化。
• 条件渲染 根据条件控制显示内容，使 UI 更具适应性。
• 将两种技术结合使用，可让你的 React 应用更具可扩展性和可维护性。