第三章：组件与 Props

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

本章目标

本章学习函数组件、type ProfileCardProps、children: React.ReactNode，以及父组件如何把 props 传给子组件。

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

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

概念模型

组件像普通函数一样接收输入并返回 UI。props 是父到子的只读输入，单向数据流让每个组件只关心自己的参数和输出。

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

最小示例

把重复的资料卡片抽成 ProfileCard，父组件传入 name、role 和 children，子组件只负责展示。

type ProfileCardProps = {
  name: string;
  role: string;
  children: React.ReactNode;
};

function ProfileCard({ name, role, children }: ProfileCardProps) {
  return (
    <article>
      <h2>{name}</h2>
      <p>{role}</p>
      <div>{children}</div>
    </article>
  );
}

export function Team() {
  return (
    <ProfileCard name="Ada" role="Frontend">
      <span>负责组件设计</span>
    </ProfileCard>
  );
}

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

规则与陷阱

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

props 在子组件中应视为只读，不要直接改写。
children 适合表达嵌套内容，不要滥用成所有数据入口。
组件名必须大写，否则 JSX 会当成原生标签。
拆分组件应围绕职责，而不是按行数机械拆分。

练习

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

创建 ProfileCardProps 并渲染两张卡片。
给 ProfileCard 增加 children 区域。
把父组件中的数组数据传给多个子组件。