一、Props 是什么？
Props（properties）是：
父组件传递给子组件的数据。
特点：
- 外部传入
- 子组件只能使用
- 不能修改
- 用于组件之间通信
示例：
function Child(props) {
return <h1>{props.name}</h1>;
}
function App() {
return <Child name="张三" />;
}
这里：
name="张三"
就是父组件传给子组件的 props。
子组件通过：
props.name
接收。
二、State 是什么？
State 是：
组件自己内部维护的数据。
特点：
- 组件内部管理
- 可以修改
- 数据变化会触发重新渲染
- 用于组件自身状态管理
示例：
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
}
这里：
count
就是 state。
setCount
用于修改 state。
三、Props 与 State 的区别
| 对比项 | Props | State |
|---|---|---|
| 数据来源 | 父组件传入 | 组件内部 |
| 是否可修改 | ❌ 只读 | ✅ 可修改 |
| 谁管理 | 父组件 | 当前组件 |
| 作用 | 组件通信 | 状态管理 |
| 数据变化是否刷新页面 | 会 | 会 |
四、Props 只读原则（非常重要）
React 有一个核心原则：
Props 是只读的（Read Only）
意思：
props.xxx = 新值
是不允许的。
❌ 错误示例
function Child(props) {
props.name = "李四"; // 错误！
return <h1>{props.name}</h1>;
}
为什么不允许？
因为：
- props 是父组件的数据
- 子组件不能随便改父组件数据
- 会导致数据流混乱
React 的数据流是：
父组件 → 子组件
叫：
单向数据流（One Way Data Flow）
五、如果子组件想修改数据怎么办？
正确做法：
父组件传函数给子组件。
示例：
function Child({ count, setCount }) {
return (
<button onClick={() => setCount(count + 1)}>
+1
</button>
);
}
function App() {
const [count, setCount] = useState(0);
return (
<Child count={count} setCount={setCount} />
);
}
这里：
- 数据在父组件
- 子组件通过调用函数修改
- 符合 React 单向数据流
六、一个非常经典的理解
你可以这样记：
Props
像：
函数参数
例如：
function add(a, b) {}
React：
function Child(props) {}
State
像：
组件自己的变量
但它是：
- 响应式的
- 更新后会重新渲染页面
七、实际开发中的使用场景
Props 适合：
- 父子传值
- 组件复用
- 配置组件
例如：
<Button type="primary" />
<Card title="文章标题" />
State 适合：
- 输入框内容
- 开关状态
- 登录状态
- loading
- 表格数据
- 计数器
八、React 官方思想（很重要）
React 推崇：
UI = f(state)
即：
UI 是 state 的映射。
state 改变：
→ UI 自动更新。
九、面试高频总结（建议记住）
Props
- 父组件传递的数据
- 只读
- 不能修改
- 用于组件通信
State
- 组件内部状态
- 可修改
- 修改后触发重新渲染
- 用于动态数据管理
React 数据流
单向数据流
父 → 子
子组件修改父组件数据
父组件传函数
子组件调用函数
