第 01 节:组件:把页面拆成会返回 UI 的函数

本节 objectives:

• 能写出一个返回 JSX 的 React 组件。
• 能解释为什么组件名要大写。
• 能把一个小页面拆成父组件和子组件。

先修:会写 JavaScript 函数 ｜ 上一节:无 ｜ 下一节 02 >>

页面不是一整块,而是一组可命名的小部件

初学 React 时,最容易把它当成"在 JavaScript 里写 HTML"。这会漏掉真正的入口:React 让你把界面拆成组件。组件是返回 UI 的 JavaScript 函数,React 用它们来拼出屏幕上的树。官方文档也从"你的第一个组件"开始,强调组件可以被嵌套和复用。¹

先别追求完整应用。能把一块界面拆成几个有名字的小函数,React 的路就走对了。

讲解

一个最小组件长这样:

function ProfileCard() {  return <section>Hi, Ada</section>;}

这里有三个关键点。第一,ProfileCard 是函数。第二,它返回的是 JSX,也就是 React 用来描述 UI 结构的语法。第三,组件名必须大写,这样 React 才会把 <ProfileCard /> 当成你写的组件,而不是普通 HTML 标签。¹

组件可以嵌套:

function App() {  return (    <main>      <ProfileCard />      <ProfileCard />    </main>  );}

这时 App 是父组件,ProfileCard 是子组件。父子不是权限关系,只是 UI 树里的包含关系。先把界面切成有意义的组件,再考虑它们之间如何传数据。

跟我做一遍(worked example)

需求:做一个课程首页的顶部区域,包含标题和一个学习进度小条。

先拆组件:

CourseHeader  └─ ProgressPill

再写代码:

function ProgressPill() {  return <span>已完成 1/7 节</span>;}
function CourseHeader() {  return (    <header>      <h1>学会 React 基础</h1>      <ProgressPill />    </header>  );}

为什么这样拆:进度小条以后可能出现在目录、侧栏或卡片里。把它做成组件,不是为了显得抽象,而是因为它已经是一个有名字、可复用的 UI 单元。

换你补全(faded example)

把下面的课程卡片补成两个组件:LessonMeta 和 LessonCard。留空处不是随便填词,而是决定"哪块 UI 值得命名"。

function ________() {  return <p>7 节 · 入门 · 约 2 小时</p>;}
function ________() {  return (    <article>      <h2>React 基础</h2>      <________ />    </article>  );}

参考答案:

function LessonMeta() {  return <p>7 节 · 入门 · 约 2 小时</p>;}
function LessonCard() {  return (    <article>      <h2>React 基础</h2>      <LessonMeta />    </article>  );}

判断点是组件名。LessonMeta 和 LessonCard 都大写,因为它们是 React 组件。

小结 + 通向下一节

React 组件是返回 UI 的 JavaScript 函数。先会拆组件,再学 JSX 细节才有落点。

下一节专门看 JSX:它看起来像 HTML,但有几条 JavaScript 世界里的硬规则。