当前位置：首页 > news >正文

React 你的第一个组件 —— 小白也能懂的通俗版

news 2026/7/2 18:23:33

🧩 先搞懂：组件是什么？

组件就是可复用的 UI 积木。就像 HTML 有<h1>、<img>这些内置标签，React 让你可以自己造标签——比如<Profile />、<TableOfContents />、<NavigationHeader />。

⚡ 核心结论一句话
React 组件就是一个首字母大写的 JavaScript 函数，它返回一段 JSX（看起来像 HTML 的标签），React 负责把它渲染到页面上。

一、定义组件的三步法

第一步：导出组件

export default function Profile() { ... }

export default是 JavaScript 标准语法，表示"这个文件的主要函数就是这个"。这样其他文件才能import它。

第二步：定义函数（注意大写！）

function Profile() { // ✅ P 必须大写！ // ... }

⚠️陷阱：组件名必须以大写字母开头，否则 React 不认识它，会当成普通 HTML 标签处理。

第三步：添加标签（JSX）

function Profile() { return ( <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> ); }

⚠️陷阱：如果return和括号里的 JSX 不在同一行，必须用圆括号()包裹，否则 JS 会自动加分号导致代码失效。

// ✅ 一行搞定 return <img src="..." alt="..." />; // ✅ 多行必须加括号 return ( <img src="..." alt="..." /> ); // ❌ 错误：return 和多行 JSX 之间没括号 return <img src="..." alt="..." />;

二、使用组件

定义完Profile后，可以在别的组件里直接用：

function Profile() { return ( <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> ); } export default function Gallery() { return ( <section> <h1>了不起的科学家</h1> <Profile /> {/* 👈 用了三次！这就是复用 */} <Profile /> <Profile /> </section> ); }

浏览器最终看到的是啥？

React 会把自定义标签展开成原生 HTML：

<section><h1>了不起的科学家</h1><imgsrc="..."alt="Katherine Johnson"/><imgsrc="..."alt="Katherine Johnson"/><imgsrc="..."alt="Katherine Johnson"/></section>

怎么区分自定义标签和 HTML 标签？

写法	React 的理解
`<Profile />`	大写开头 → 找名为`Profile`的组件
`<img />`	小写开头 → 原生 HTML 标签
`<section>`	小写开头 → 原生 HTML 标签

三、嵌套和组织组件

父子关系

Gallery（父组件） ├── Profile（子组件 × 3） └── h1（原生标签）

定义一次，到处复用。这是 React 最核心的价值之一。

文件组织策略

小项目 / 组件相关紧密→ 多个组件写在同一个文件
大项目→ 每个组件一个文件，通过export/default import管理

src/ ├── App.js （根组件） ├── Gallery.js （含 Gallery + Profile） └── Navigation.js （独立文件）

四、⚠️ 重要陷阱：不要在组件中定义组件

// 🔴 绝对不要这样做！ export default function Gallery() { function Profile() { // ← 嵌套在另一个组件内部 return <img src="..." />; } return <Profile />; }

为什么不行？

每次Gallery重新渲染都会创建一个新的Profile函数
性能极差
会导致 state 丢失等诡异 bug

正确做法：所有组件都在顶层定义

// ✅ 正确：全部在顶层 export default function Gallery() { return ( <section> <Profile /> </section> ); } function Profile() { // ← 平级定义 return <img src="..." />; }