(React中组件的)状态(state)和属性(props)之间有何不同？

定义区别

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