第五章：条件渲染、列表与 key

本章属于 React 教程的核心路线。建议先通读概念模型，再手写最小示例，最后用练习验证自己能否独立复现。

本章目标

本章学习条件渲染、数组渲染和 key。重点理解 key={item.id} 如何帮助 React 保持元素身份。

阅读本章时，请把每个 API 放回“数据如何变成界面、用户操作如何改变数据”的主线中理解。React 的学习重点不是背诵语法，而是建立可预测的渲染模型。

识别本章概念在真实组件中的位置
能写出一个最小可运行示例
能解释常见错误为什么发生

概念模型

条件决定是否渲染某个分支，列表把数据数组映射成元素数组。key 是同级列表中的稳定身份标识，React 用它判断哪些元素被新增、删除或移动。

你可以把 React 程序看成一棵由组件组成的元素树。每次输入数据、状态或外部系统发生变化，React 会重新计算需要展示的 React element，再用高效的方式更新浏览器中的 DOM。

最小示例

空状态和 items.map 是最常见组合；当列表为空时展示提示，有数据时逐项渲染。

type Item = { id: string; title: string };

export function ReadingList({ items }: { items: Item[] }) {
  if (items.length === 0) {
    return <p>暂无内容，请先添加章节。</p>;
  }

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

type LessonNote = { title: string; done: boolean };\nconst note: LessonNote = { title: 'React 教程', done: false };

规则与陷阱

规则的价值在于让多人维护同一个项目时仍能预测行为。下面这些限制看似细碎，实际都在保护组件的输入、输出和生命周期边界。

key 只需要在同级数组中唯一，不需要全局唯一。
避免使用数组 index 作为 key，插入或重排时会破坏元素身份。
条件渲染不要让两个分支返回含义完全不同但 key 相同的元素。
map 回调中复杂逻辑过多时，应先整理数据再渲染。

练习

练习应当先小后大：先验证一个概念，再把它接入完整页面。不要在没有理解失败原因时复制更复杂的代码。

渲染一个章节数组，并用 id 作为 key。
添加空数组时的条件空状态。
尝试用 index key 后重新排序，观察输入框状态错位。