90% 的 React 初学者，都低估了 Props。
他们以为它只是“从父组件往子组件传点数据”。
但真正写过复杂组件、设计过通用组件的人都知道一句话：
Props 决定了一个组件“好不好用”，而不是“能不能用”。
这篇文章，我们不讲 API 清单、不背概念，
而是围绕 Props 系统的 5 个核心能力，一次性讲透 React 组件化的底层逻辑：
- Props 传递
- Props 解构
- 默认值（defaultProps / 默认参数）
- 类型校验（PropTypes）
- children 插槽机制（React 的核武器）
👉 看完你会明白：
React 真正厉害的不是 JSX，而是 Props 设计。
一、Props 的本质：组件的“对外接口”
先抛一个结论：
React 组件 ≈ 一个函数 + 一套 Props 接口
来看一个最简单的组件 👇
1function Greeting(props) { 2 return <h1>Hello, {props.name}</h1> 3} 4
使用时：
1<Greeting name="白兰地" /> 2
很多人到这里就停了，但问题是：
❓
name到底是什么？
答案是：
name 不是变量，是组件对外暴露的能力。
Props 本质上是：
- 父组件 👉 子组件的输入
- 组件作者 👉 使用者的约定
二、Props 解构：不是语法糖，而是“设计声明”
对比两种写法 👇
❌ 不推荐
1function Greeting(props) { 2 return <h1>Hello, {props.name}</h1> 3} 4
✅ 推荐
1function Greeting({ name }) { 2 return <h1>Hello, {name}</h1> 3} 4
为什么？
解构不是为了少写字，而是为了表达意图。
当你看到函数签名：
1function Greeting({ name, message, showIcon }) {} 2
你立刻就知道：
- 这个组件“需要什么”
- 组件的“输入边界”在哪里
👉 好的组件，从函数签名就能读懂。
三、Props 默认值：组件“健壮性”的第一步
看这个组件 👇
1function Greeting({ name, message }) { 2 return ( 3 <div> 4 <h1>Hello, {name}</h1> 5 <p>{message}</p> 6 </div> 7 ) 8} 9
如果使用者这么写：
1<Greeting name="空瓶" /> 2
会发生什么？
message === undefined
这时候就轮到 默认值 出场了。
方式一：defaultProps（经典）
1Greeting.defaultProps = { 2 message: 'Welcome!' 3} 4
方式二：解构默认值（更推荐）
1function Greeting({ name, message = 'Welcome!' }) {} 2
💡默认值不是兜底，而是组件设计的一部分。
它代表的是：
- “在你不配置的情况下”
- “组件应该表现成什么样”
四、Props 类型校验：组件的“自说明文档”
来看一段很多人忽略、但非常值钱的代码 👇
1import PropTypes from 'prop-types' 2 3Greeting.propTypes = { 4 name: PropTypes.string.isRequired, 5 message: PropTypes.string, 6 showIcon: PropTypes.bool, 7} 8
很多人会说：
“这不是可有可无吗？”
但在真实项目里，它解决的是：
- ❌ 参数传错没人发现
- ❌ 新人不知道组件怎么用
- ❌ 组件一多，全靠猜
🔍 PropTypes 的真正价值
不是防 bug，而是“降低理解成本”。
当你看到 propTypes，就等于看到一份说明书：
- 哪些 props 必须传？
- 哪些是可选？
- 类型是什么？
👉 一个没有 propTypes 的通用组件，本质上是“黑盒”。
五、children：React Props 系统的“王炸”
如果只能选一个 Props 机制，我会毫不犹豫选：
🧨 children
来看一个 Card 组件 👇
1const Card = ({ children, className = '' }) => { 2 return ( 3 <div className={`card ${className}`}> 4 {children} 5 </div> 6 ) 7} 8
使用时：
1<Card className="user-card"> 2 <h2>张三</h2> 3 <p>高级前端工程师</p> 4 <button>查看详情</button> 5</Card> 6
这里发生了一件非常重要的事情：
组件不再关心“内容是什么”。
🧠 children 的设计哲学
组件负责“骨架”，使用者负责“填充”。
- Card 只负责：边框、阴影、间距
- children 决定：展示什么内容
这让组件具备了两个特性：
- ✅ 高度复用
- ✅ 永不过期
六、children + Props = 通用组件的终极形态
再看一个更高级的例子：Modal 👇
1<Modal HeaderComponent={MyHeader} FooterComponent={MyFooter}> 2 <p>这是一个弹窗</p> 3 <p>你可以在这里显示任何 JSX</p> 4</Modal> 5
Modal 的实现：
1function Modal({ HeaderComponent, FooterComponent, children }) { 2 return ( 3 <div> 4 <HeaderComponent /> 5 {children} 6 <FooterComponent /> 7 </div> 8 ) 9} 10
这背后是一个非常高级的思想：
Props 不只是数据，也可以是组件。
七、请记住这 5 条 Props 设计铁律
🔥 如果你只能记住一段话，请记住这里
- Props 是组件的“对外接口”，不是随便传的变量
- 解构 Props，是在声明组件的能力边界
- 默认值，决定组件的“基础体验”
- 类型校验，让组件自带说明书
- children，让组件从“可用”变成“好用”
八、写在最后
当你真正理解 Props 之后，你会发现：
- React 不只是 UI 库
- 它在教你如何设计 API
- 如何让别人“用得爽”
Props 写得好不好，决定了一个人 React 水平的上限。
