函数组件

这一课你将能做到

1. 写出一个函数组件并在另一个组件里使用它
2. 遵守「组件名大写」约定
3. 理解：渲染阶段尽量保持「纯粹」（同样输入同样输出）

为什么要学

页面拆成页头、路径卡片、按钮，各自一块——就是组件。
现代 React 以函数组件为主：一个函数，返回 JSX。

人话：组件 = 可复用的自定义标签。你写 function PathCard(...)，别人就能写 <PathCard />。

本站首页如果把「一张路径卡」和「整页导航」揉在一个 800 行函数里，改一处样式会怕牵全身。拆开后：改卡片只动卡片。这就是工程上要学组件的原因，不是为了显得「架构高级」。

先建立图像

function Welcome({ name }) {
  return <h1>你好，{name}</h1>;
}

// 使用：像自定义标签
<Welcome name="同学" />

<Welcome /> 实际会让 React 去调用函数 Welcome，并把 name="同学" 变成参数（下一课叫 props）。

页面
 ├─ Header
 ├─ PathCard   ← 可出现很多次
 ├─ PathCard
 └─ Footer

跟着做（逻辑练习；在 Next/Vite 项目中粘贴）

步骤 1：最小组件

export function Hello() {
  return <p>Hello React</p>;
}

export 是为了别的文件能 import { Hello } from "./Hello"。先在同一文件里用也可以。

步骤 2：组合（大的由小的拼）

function Avatar() {
  return <span aria-hidden="true">🙂</span>;
}

function Hello() {
  return <p>Hello React</p>;
}

export function HelloCard() {
  return (
    <section>
      <Avatar />
      <Hello />
    </section>
  );
}

组合的好处：改 Avatar 一处，所有用到它的卡片一起变。
坏处（拆过头）：五个文件只有一行 JSX，跳来跳去更累。一块难懂再拆，不要为拆而拆。

步骤 3：想想「纯」——渲染时别搞副作用

渲染（函数被调用、准备 JSX）时尽量不要：

• 随便改全局变量
• 发 fetch（放到 useEffect 或框架的数据 API，后面学）
• 用 Math.random() 当列表 key 或关键业务 id（难复现、列表会乱）

能算出来的，在渲染里直接算：

function Price({ cents }) {
  const yuan = (cents / 100).toFixed(2);
  return <p>¥{yuan}</p>;
}

同样的 cents，永远得到同样的界面——这就是「纯」的直觉。
点击才改数据、请求才碰网络：那些是事件和 Effect 的事。

步骤 4：本站对照

打开任意 PathCard 一类文件：名字大写、返回一块 JSX、可能接收 title/href。
你现在的任务不是抄完整个站点，而是能指出：哪个函数是组件、谁嵌了谁。

步骤 5：组合优于继承

function Shell({ children }) {
  return <section className="shell">{children}</section>;
}
function Page() {
  return (
    <Shell>
      <h1>课名</h1>
    </Shell>
  );
}