React 组件入门：构建可复用、可组合的 UI 单元
在现代前端开发中，React 以其“组件化”思想彻底改变了我们构建用户界面的方式。对于初学者而言，理解 组件（Component） 是掌握 React 的关键第一步。本文将围绕你创建的 props-demo 项目，深入浅出地讲解 React 组件的核心概念、作用以及如何通过 props 实现组件间的数据传递。
什么是 React 组件？
简单来说，组件就是可复用的 UI 构建块，就像乐高积木一样。你可以把一个复杂的页面拆解成多个小组件，每个组件负责渲染一部分内容，并可以独立开发、测试和维护。
在 React 中，组件通常是一个 JavaScript 函数（函数式组件），它接收输入（称为 props），并返回描述 UI 的 JSX 元素。例如：
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
这个 Greeting 组件接收一个 name 属性，就能动态显示不同的问候语。
组件的作用与优势
1. 复用性
一旦你写好一个组件（比如 Card），就可以在多个地方重复使用，无需重复编写 HTML 和样式代码。
2. 封装性
组件将结构（JSX）、逻辑（JavaScript）和样式（CSS 或内联样式）封装在一起，对外只暴露必要的接口（props），内部实现细节对使用者透明。
3. 可组合性
组件可以嵌套使用，形成父子关系。父组件可以将子组件作为其 UI 的一部分，甚至将任意内容（children）注入到子组件中，极大提升灵活性。
4. 协作友好
在团队开发中，不同开发者可以并行开发不同组件，只要约定好 props 接口，就能无缝集成。
父子组件通信：Props 是桥梁
React 遵循 单向数据流 原则：数据从父组件流向子组件，通过 props 传递。
- 父组件 拥有状态（通常通过
useState管理），并决定要传递什么数据给子组件。 - 子组件 接收 props，将其视为只读输入，不能直接修改。
App.jsx 为例：
<Greeting name="老邱" message="我是开心超人！" />
这里，App 是父组件，Greeting 是子组件。name 和 message 就是传递给 Greeting 的 props。
在 Greeting.jsx 中，我们通过解构获取这些值：
const { name, message, showIcon } = props;
然后在 JSX 中使用它们，实现动态渲染。
⚠️ 注意：props 是只读的！子组件不能修改传入的 props。如果需要响应用户交互并更新数据，应由父组件提供回调函数（如
onClick处理函数）作为 prop 传入。
Props 的高级用法：传递组件与 children
React 的强大之处在于，props 不仅可以是字符串或数字，还可以是函数、对象，甚至是其他组件。
1. 传递组件作为 Prop
在 Modal.jsx 中，你看到这样的用法：
<Modal
HeaderComponent={MyHeader}
FooterComponent={MyFooter}
>
<p>这是一个弹窗</p>
</Modal>
这里，MyHeader 和 MyFooter 是两个自定义组件，被作为 prop 传递给 Modal。Modal 内部通过 <HeaderComponent /> 动态渲染它们。这种方式让 Modal 高度可定制，适用于各种场景。
2. 使用 children 实现内容插槽
children 是 React 的特殊 prop，代表组件标签之间的内容。在 Card.jsx 中：
<Card>
<h2>张三</h2>
<p>高级前端工程师</p>
</Card>
这些内容会自动作为 children 传入 Card 组件，并在内部通过 {children} 渲染。这类似于 Vue 中的 <slot>，是构建通用容器组件（如卡片、模态框、布局）的关键技巧。
类型安全与默认值：PropTypes 与 defaultProps
虽然 React 本身不强制类型检查，但为了提升代码健壮性，我们可以使用 prop-types 库进行运行时校验。
在 Greeting.jsx 中：
Greeting.propTypes = {
name: PropTypes.string.isRequired,
message: PropTypes.string,
showIcon: PropTypes.bool,
};
Greeting.defaultProps = {
message: '我要起飞',
};
isRequired表示该 prop 必须传入。defaultProps提供默认值，当父组件未传递message时，自动使用'我要起飞'。
💡 在 TypeScript 项目中，通常用接口（interface）替代 PropTypes，获得更强大的编译时类型检查。
样式处理：CSS 与内联样式的结合
两种常见样式方案：
- CSS 文件（如
Card.css）：适合复杂、可复用的样式，支持伪类（:hover）和媒体查询。 - CSS-in-JS（如
Modal.jsx中的styles对象）：适合动态样式或组件私有样式，避免全局污染。
注意：在 JSX 中，class 属性要写成 className，因为 class 是 JavaScript 的保留关键字。
总结
React 组件是构建现代 Web 应用的基石。通过将 UI 拆分为独立、可复用的组件，并利用 props 实现数据自上而下流动，我们能写出结构清晰、易于维护的代码。
在你的 props-demo 项目中：
Greeting展示了基础 props 传递；Modal演示了高阶组件组合（传递组件 + children）；Card体现了样式封装与内容插槽。
掌握这些核心概念后，你已经迈出了 React 开发的重要一步。接下来，可以进一步学习状态管理（useState）、副作用处理（useEffect）以及自定义 Hook，逐步构建更复杂的应用。
记住：好的 React 应用，始于良好的组件设计。
