你的第一个组件：声明、嵌套与大写规范

组件是 React 的核心概念之一。它们是构建用户界面（UI）的基石。在网页上，从一个简单的文字链接、一个头像图标，到整个复杂的新闻流列表，都可以被抽象为一个一个独立的组件。

在本关中，你将学习如何从零声明你的第一个组件，如何将它们嵌套组合，以及为什么命名规范在 React 中具有决定性的语法意义。

1. 组件：UI 的乐高积木

在传统的 Web 开发中，HTML 提供了一批固定的内置标签，比如 <h1>、<p>、<button>、<select>。如果你想制作一个“科学家名片卡片”，包含头像、姓名、成就列表以及一个关注按钮，你必须手动拼凑这堆标签。

而 React 允许你把这堆标签、样式以及相关的交互行为封装为一个全新的自定义标签——比如 <Profile />。你可以像使用原生 HTML 标签一样，随时随地在任何页面里重复使用 <Profile />。

2. 定义组件的三步法

声明一个 React 组件极其简单，只需遵循标准的三步：

第一步：导出组件（Export the component）

使用 export default 前缀，让这个组件能够被其他文件导入使用：

export default

第二步：定义函数（Define the function）

写一个普通的 JavaScript 函数。函数名称必须以大写字母开头：

function Profile() { ... }

第三步：添加标签（Add markup）

让函数返回你想要渲染的 JSX 标签：

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

HTML/JS 补课：

<img>：原生 HTML 图片标签。

src：图片资源的网址路径。

alt：替代文本，当图片因网络问题无法加载或供视障读屏软件使用。

3. 使用与嵌套组件

现在你已经有了 Profile 组件，你可以在其他组件中多次嵌套使用它。例如，我们创建一个 Gallery（展馆）组件来展示三位杰出科学家的头像：

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>了不起的科学家们</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

浏览器最终渲染出的 DOM 树结构会非常纯净：一个 <section> 标签包裹着一个 <h1> 和三张并列的 <img> 图片。用户看到的界面一模一样，但你的源代码获得了极高的复用性。

4. 为什么组件名必须以大写字母开头？

请仔细观察：

<section>、<h1>、<img>：全部是小写字母。
<Profile />、<Gallery />：全部以大写字母开头。

这不是代码风格偏好，而是 JSX 的语法解析铁律：

如果标签以小写字母开头，React 会将其直接编译为对应的原生 HTML 元素（例如 React.createElement('section')）。
如果标签以大写字母开头，React 会将其识别为你自定义的 JavaScript 组件变量（例如 React.createElement(Profile)），然后调用该函数来计算界面。

如果把组件命名为 function profile() 并使用 <profile />，React 会在页面上渲染一个未知的 HTML 标签 <profile></profile>，你的自定义函数根本不会被执行！

5. 核心避坑指南：切勿在组件内部嵌套定义组件！

初学者常常会写出类似这样的代码：

// ❌ 严重错误！绝对不要这样做！
export default function Gallery() {
  // 错误：在 Gallery 内部声明 Profile 组件函数
  function Profile() {
    return (
      <img
        src="https://i.imgur.com/MK3eW3As.jpg"
        alt="Katherine Johnson"
      />
    );
  }

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

为什么这样做是极度有害的？

当父组件 Gallery 重新渲染时，它会重新定义一个全新的 Profile 函数。在 React 看来，这是一个完全不同的新组件，导致每次父组件渲染时，子组件的状态都会被彻底销毁并重新初始化，引发严重的性能卡顿和数据丢失 bug。

正确规则：永远在文件的顶层声明每个组件。组件可以嵌套使用（渲染调用），但绝不能嵌套定义！

总结

React 允许你创建自定义的 UI 组件；
组件是返回 JSX 标签的普通 JavaScript 函数；
组件名必须以大写字母开头；
始终在文件顶级声明组件，切勿嵌套定义。

教学模式