Component 组件

最后更新：2026-10-28

组件是 React 应用的最小复用单元：一个接收 props、返回 JSX 的函数。把界面拆成一个个组件后，各部分可以独立开发、测试与复用，像搭积木一样组合出完整页面。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

function Welcome({ name }) {   // 组件 = 返回 JSX 的函数，名字必须大写
  return <h1>你好，{name}</h1>
}

<Welcome name="小明" />        // 像 HTML 标签一样使用

props	父组件传入的数据对象；组件内部通常直接解构使用，只读不可修改。

返回值：组件函数返回一段 JSX（或 null），描述这个组件要渲染的内容。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

标题「组件复用演示」下方出现三行问候语：你好小明！、你好小红！、你好 React 学习者！——同一个组件渲染了三次，只是 props 不同。

⚠️ 注意 组件名必须首字母大写：小写标签会被 React 当成普通 HTML 元素。

💡 提示 不要在组件函数内部再定义组件——每次渲染都会生成新组件并导致整棵子树重建，应提到外层。

ℹ️ 说明 现代 React 只写函数组件；类组件仅见于老代码，两者可以共存。

更多案例整理中，敬请期待。

Q React 组件名为什么必须大写？

A JSX 编译时靠首字母区分：<div> 编译成字符串标签，<Welcome> 编译成组件引用；小写开头会被当作原生 HTML 元素。

Q 一个文件可以写多个组件吗？

A 可以，小而相关的组件放一个文件很常见；惯例是一个文件只导出一个主组件，辅助小组件留在同文件内。

Q 函数组件和类组件有什么区别？

A 类组件用 class 与生命周期方法，函数组件用 Hooks 管理状态与副作用；新项目一律推荐函数组件。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。