React 中的 State 和 Props：理解关键区别
大家好！在 React 开发中，State 和 Props 是最核心、最基础的两个概念，但也是新手最容易混淆的两个点。很多人一开始都会问：“它们到底有什么区别？我什么时候用哪个？”
今天我们用最清晰的方式，把它们彻底讲透。包括定义、区别、使用场景、代码示例和2025年现代 React（Hooks + 函数组件为主）的真实写法。看完这篇，你再也不会搞混了！
1. 一句话总结（请牢牢记住）
- Props：从外面（父组件）传进来的、只读的配置
“别人给你的东西，你只能看，不能改” - State：组件自己内部管理的、可变的数据
“你自己的东西，你可以随时改，改了界面会跟着变”
一句话记忆口诀：
Props 是接收的，State 是拥有的
Props 只读，State 可写
2. 核心区别对比表（2025年最新视角）
| 特性 | Props | State |
|---|---|---|
| 谁拥有/管理 | 父组件（或更高层） | 当前组件自己 |
| 是否可修改 | 不可修改（只读，immutable） | 可修改（通过 setState / useState） |
| 修改谁负责 | 父组件修改后重新传 | 当前组件自己调用 setter |
| 数据来源 | 父 → 子 单向数据流 | 组件内部（初始值可来自 props） |
| 是否引起重渲染 | 变化时引起子组件重渲染 | 变化时引起本组件及子树重渲染 |
| 适用场景 | 配置、参数、回调函数、从父传数据 | 用户交互、表单输入、开关、计数器 |
| 函数组件写法 | 函数参数 / {props.xxx} | useState / useReducer |
| 类组件写法 | this.props | this.state + this.setState |
| 是否可以默认值 | 可以（defaultProps / 默认解构） | 可以（useState(初始值)） |
3. 代码示例：直观对比
场景：一个可点赞的帖子组件
// 父组件
function App() {
return (
<div>
<Post
username="重阳" // ← props
initialLikes={42} // ← props（初始值）
avatarUrl="https://..." // ← props
/>
</div>
);
}// 子组件（现代 Hooks 写法）
function Post({ username, initialLikes, avatarUrl }) {
// props：只读，从父组件来
// 不能写：username = "xxx" ← 错误！
// state：组件自己管理，可修改
const [likes, setLikes] = useState(initialLikes); // 初始值来自 props
const handleLike = () => {
setLikes(prev => prev + 1); // ← 只有 state 可以这样改
};
return (
<div className="post">
<img src={avatarUrl} alt={username} /> {/* props 只读使用 */}
<h2>{username}</h2>
<p>点赞数：{likes}</p>
<button onClick={handleLike}>
👍 点赞 ({likes})
</button>
</div>
);
}关键观察：
username、avatarUrl是 props → 父组件决定，子组件只能读likes是 state → 子组件自己维护，可以随时 +1- 即使父组件以后把
initialLikes改成 100，子组件的likes也不会自动变（因为 state 已经独立了）
4. 常见使用误区与正确时机
误区1：把所有数据都放 state
错：用户名、头像、主题色等配置信息不应该放在 state 里，应该用 props。
对：只有“会因为用户交互、时间、异步请求而变化”的数据才放 state。
误区2：子组件试图修改 props
// 错误示范
function Child({ count }) {
count++; // TypeError 或无效果
// 或
props.count = 100; // 永远不要这样做！
}误区3：父组件直接改子组件的 state
错：父组件不能直接访问或修改子组件的 state（违背封装）。
对：通过 props 传回调函数，让子组件自己改自己的 state。
// 正确：父传回调
<Child onChange={newValue => setParentValue(newValue)} />5. 现代 React（2025）中的进阶理解
- 受控组件 vs 非受控组件
表单 input 的 value 来自 props（受控）还是 state（非受控）是面试高频。 - 状态提升（Lifting State Up）
当两个子组件需要共享数据时，把 state 提到最近的公共父组件，用 props 向下透传。 - props drilling 问题
层层透传很麻烦 → 现代解决方案：Context + useContext / zustand / Jotai / Recoil / Redux Toolkit - React 19（2025主流）新特性影响
use()、useActionState、useOptimistic 等新 Hook 让状态管理更优雅，但state vs props 的核心区别不变。
6. 终极一句话判断法
问自己两个问题：
- 这个数据是从父组件传下来的配置，子组件只需要用，不需要改？
→ 用 props - 这个数据是组件自己要维护的、会因为交互/时间/网络而变化？
→ 用 state
记住这个判断，你基本不会用错。
希望这篇文章让你对 State 和 Props 的理解从“大概知道”变成“非常清晰”！
有任何具体场景还搞不清的，欢迎留言，我们继续讨论～
React 之路，State & Props 是地基，打牢它，后面的 Context、Reducer、Server Components 都会轻松很多。加油！🚀
