定义区别
| 对比项 | props（属性） | state（状态） |
|---|---|---|
| 来源 | 由 父组件传入 | 由 组件自身定义和维护 |
| 是否可修改 | 不可修改（只读） | 可修改（通过 setState 或 useState） |
| 作用 | 用于让组件间 通信（父→子） | 用于管理组件内部 动态数据 |
| 生命周期 | 在整个组件生命周期中由父组件控制 | 组件内部随用户交互或逻辑改变而变化 |
| 更新方式 | 父组件重新渲染时会重新传入新的 props | 调用 setState() 或 setXXX() 时更新 |
| 存储位置 | 函数组件参数 / this.props |
useState 返回的值 / this.state |
通俗理解
props：外部传进来的数据，自己不能改。
类比成“函数的参数”。
state：自己组件内部的数据，自己能改。
类比成“函数里的局部变量”。
代码对比示例
// 父组件
function App() {return <Counter initialCount={5} />; // 传入 props
}// 子组件
function Counter({ initialCount }) {// state 定义内部可变数据const [count, setCount] = useState(initialCount);return (<div><p>初始值（props）: {initialCount}</p><p>当前计数（state）: {count}</p><button onClick={() => setCount(count + 1)}>增加</button></div>);
}
在上例中：
-
initialCount 是 props（父组件传入，不可改）；
-
count 是 state（自己维护，可改）。
简短总结口诀
- props → 外部传入、只读
- state → 内部维护、可变
- props 影响 state，但 state 不影响 props