组件：把一个大页面分成几个负责人

一句话理解

组件就是“负责页面某一块内容的函数”。它收到数据，返回这一块应该显示什么。

把网站想成一家餐厅：收银台、菜单墙和后厨都有自己的负责人。React 页面也一样，输入区、留言列表和每张留言卡片通常各有一个组件。

什么时候会遇到组件

你看到这些文件名时，大概率就是 React 组件：

App.tsx
MessageForm.tsx
MessageList.tsx
MessageCard.tsx

文件名不一定都这样，但组件名通常以大写字母开头。

具体例子：一张留言卡片

function MessageCard() {
  return <article>今天学会了 Network</article>
}

按人话读：

function          创建一个可以重复使用的功能块
MessageCard       这个功能块叫“留言卡片”
()                这里以后可以接收数据
{ }               这对大括号包住组件要做的事
return            把要显示的页面交给 React
<article>...</article>  最终显示的 HTML 结构

当另一个组件写下 <MessageCard />，就像对 React 说：“请把留言卡片放在这里。”

页面是一棵组件树

function App() {
  return (
    <main>
      <MessageForm />
      <MessageList />
    </main>
  )
}

App 是父组件，里面放了两个子组件。父子不是谁更高级，只表示谁包着谁。

怎样从网页找到组件文件

假设“发布留言”按钮坏了：

1. 在编辑器全局搜索按钮上看得到的文字：发布留言。
2. 搜索结果可能落在 MessageForm.tsx。
3. 在附近找 onClick 或 <form onSubmit={...}>。
4. 记下绑定的函数名，例如 handleSubmit。
5. 再在当前文件里找到这个函数，继续追它做了什么。

这比从项目第一行开始读有效得多。

常见错误怎么判断

页面提示组件不存在

ReferenceError: MessageList is not defined

先看 MessageList 是否正确导入，名字和文件里的导出是否一致。

什么都没有显示

先看组件有没有 return，再看父组件是否真的写了 <MessageList />。

组件名用了小写

<messageCard /> 会被 React 当成陌生 HTML 标签。自定义组件写成 <MessageCard />。

自己试试

打开项目，搜索页面上一个独特的按钮文字。找到它所在的 .tsx 或 .jsx 文件后，只回答三个问题：组件叫什么、父组件是谁、按钮绑定了哪个函数。暂时不要修改代码。

页面上的发布按钮坏了，最省力的第一步是什么？

答案：全局搜索按钮上能看到的文字，先找到负责这块页面的组件文件。