建站实战干货

定义区别

对比项	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