Frontend Academy · 课时

列表、键与条件渲染

Q: 「列表、键与条件渲染」这节课中我会学到什么？

使用 .map() 渲染元素数组，提供稳定的 key 属性，并使用 && 和三元运算符有条件地渲染元素。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 .map() 渲染元素数组，提供稳定的 key 属性，并使用 && 和三元运算符有条件地渲染元素。

列表、键与条件渲染 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

使用 .map() 渲染列表

在数组上调用 .map()，为每个项目返回 JSX，即可渲染动态列表。React 渲染元素数组的方式与渲染单个元素相同。

const fruits = ['apple', 'banana', 'cherry'];

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

key 属性 — 为什么它很重要

key 是 React 的特殊属性，可以帮助 React 识别列表中哪些项目发生了变化、被添加或被移除。没有键，或者使用索引等不稳定的键时，React 可能会产生错误的更新。

好的键与不好的键

好的键：来自数据的唯一稳定标识符（例如 item.id）。不好的键：数组索引（项目可能会重新排序）或随机值（每次渲染都会变化）。

// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}

// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}

渲染对象

将对象数组映射为组件，并将对象解构为属性。

interface Todo { id: number; text: string; done: boolean; }

const todos: Todo[] = [...];

return (
  <ul>
    {todos.map(({ id, text, done }) => (
      <TodoItem key={id} text={text} done={done} />
    ))}
  </ul>
);

使用 && 进行条件渲染

请使用 && 短路运算符有条件地包含 JSX。如果左侧为假值，则不会渲染任何内容。请注意假值数字——0 会渲染为“0”。

function Status({ count }: { count: number }) {
  return (
    <div>
      {count > 0 && <Badge count={count} />}
      {/* Safer: */}
      {count > 0 ? <Badge count={count} /> : null}
    </div>
  );
}

使用三元运算符进行条件渲染

请使用三元运算符，根据条件渲染两个元素中的一个。

function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
  return isLoggedIn
    ? <button onClick={logout}>Sign Out</button>
    : <button onClick={login}>Sign In</button>;
}

使用 if 语句进行条件渲染

对于复杂条件，请在 return 之前使用 if 语句。对于加载或错误状态，请提前返回。

function UserProfile({ user }: { user: User | null }) {
  if (!user) return <p>Loading...</p>;
  if (user.banned) return <p>Account suspended.</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

映射前先筛选

请在映射前筛选数组，只渲染匹配的项目。这样既清晰又易读。

const activeUsers = users.filter(u => u.active);

return (
  <ul>
    {activeUsers.map(user => (
      <UserItem key={user.id} {...user} />
    ))}
  </ul>
);

空状态

请始终处理空数组的情况。静默渲染空列表会令人困惑——请改为显示有帮助的空状态消息。

return (
  <div>
    {todos.length === 0
      ? <p className="empty-state">No tasks yet. Add one above!</p>
      : <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
    }
  </div>
);

使用传送门渲染列表

需要出现在不同 DOM 节点（例如下拉菜单）中的长列表可以使用 ReactDOM.createPortal。不过，大多数列表渲染都直接在树中进行。

虚拟化列表以提升性能

对于非常长的列表（1,000 个以上的列表项），请使用 react-window 或 @tanstack/react-virtual 之类的虚拟化库。它们只渲染可见的行，从而避免 DOM 性能问题。

快速检查

在 React 列表中，什么时候可以接受使用数组索引作为 key？

回顾：列表与条件渲染

使用 .map() 渲染列表。始终添加稳定且唯一的键属性。可选元素使用 &&（注意 0）。二选一时使用三元运算符。加载或错误状态使用提前返回。对于条件列表，先过滤再映射。数组为空时显示空状态消息。非常长的列表使用虚拟化。

常见问题解答

「列表、键与条件渲染」课时是免费的吗？

是的 — 「列表、键与条件渲染」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「列表、键与条件渲染」这节课中我会学到什么？

使用 .map() 渲染元素数组，提供稳定的 key 属性，并使用 && 和三元运算符有条件地渲染元素。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「列表、键与条件渲染」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy