6. 第一个组件

组件是什么

组件是可复用的 UI 单元。它包含自己的外观（JSX）和逻辑（JavaScript）。

你可以把组件理解成自定义的 HTML 标签。<button> 是原生标签，<UserCard /> 是你自己定义的。

定义一个组件

React 组件就是一个返回 JSX 的 JavaScript 函数：

function Profile() {
  return (
    <img
      src="https://example.com/photo.jpg"
      alt="张三"
      className="avatar"
    />
  );
}

就这么简单。函数名 Profile，返回一段 JSX。

两个必须遵守的规则

规则一：名字必须大写开头

React 靠首字母大小写区分组件和 HTML 标签：

// 大写开头 → React 认为是组件
<Profile />

// 小写开头 → React 认为是 HTML 标签
<profile />

// 错误：小写开头，React 找不到组件
function profile() {
  return <img src="..." alt="..." />;
}

// 正确：大写开头
function Profile() {
  return <img src="..." alt="..." />;
}

规则二：必须导出才能被其他文件使用

// Profile.jsx
export default function Profile() {
  return <img src="..." alt="..." />;
}

export default 让这个组件能被其他文件 import。

使用组件

定义好组件后，可以像 HTML 标签一样使用：

// App.jsx
import Profile from './Profile';

function App() {
  return (
    <div>
      <h1>用户列表</h1>
      <Profile />
      <Profile />
      <Profile />
    </div>
  );
}

这里 <Profile /> 用了三次，会渲染三张图片。组件写一次，用多次——这就是复用的意义。

组件的组合

组件可以嵌套其他组件，形成树状结构：

function Avatar() {
  return <img className="avatar" src="..." alt="..." />;
}

function UserName() {
  return <span className="name">张三</span>;
}

function UserCard() {
  return (
    <div className="card">
      <Avatar />
      <UserName />
    </div>
  );
}

function App() {
  return (
    <div>
      <UserCard />
      <UserCard />
    </div>
  );
}

组件树：

App
└── UserCard
    ├── Avatar
    └── UserName

浏览器看到的是什么

虽然你写的是 <Profile />，浏览器最终看到的只是普通 HTML：

<img src="https://example.com/photo.jpg" alt="张三" class="avatar" />

React 组件只是开发时的抽象，运行时不存在。

不要嵌套定义组件

一个常见错误：在组件内部定义另一个组件。

// 错误示范
function Gallery() {
  // 不要这样写！
  function Profile() {
    return <img src="..." alt="..." />;
  }

  return (
    <div>
      <Profile />
    </div>
  );
}

问题：每次 Gallery 重新渲染，Profile 都是一个新的函数。React 会认为这是不同的组件，导致状态丢失和性能问题。

正确做法：在顶层定义组件。

// 正确
function Profile() {
  return <img src="..." alt="..." />;
}

function Gallery() {
  return (
    <div>
      <Profile />
    </div>
  );
}

动手试试

打开 src/App.jsx，把默认内容替换成：

function Welcome() {
  return <h1>欢迎来到我的应用</h1>;
}

function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
    </div>
  );
}

export default App;

保存后浏览器应该显示两个”欢迎来到我的应用”。

本节小结

• 组件是返回 JSX 的 JavaScript 函数
• 名字必须大写开头（PascalCase）
• 用 export default 导出，用 import 引入
• 组件可以组合、复用
• 不要在组件内部定义组件

下一节深入 JSX 的语法规则。