在 React 开发中，**状态（State）和属性（Props）**是构建组件的两大核心概念，但它们的用途和行为有本质区别。理解它们的区别是掌握组件化开发的关键！

📌 状态（State） vs 属性（Props）

特性 状态（State） 属性（Props）
定义 组件内部维护的数据 从父组件传递给子组件的数据
可变性 可通过 setState 修改 仅可读，不可修改
生命周期 与组件生命周期绑定 由父组件控制更新

🛑 注意：状态是组件私有的，属性是单向传递的！
🌰 示例：点击按钮改变计数器数值时，count 应该是状态，而从父组件传入的 initialValue 是属性。

📚 状态的使用场景

  1. 用户交互：如表单输入、按钮点击等
  2. 动态数据：如实时更新的计时器、动画状态
  3. 组件内部逻辑：如条件渲染、数据缓存
// 示例：状态驱动的计数器
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>加1</button>
    </div>
  );
}
React_State

📚 属性的使用场景

  1. 父子通信：父组件向子组件传递配置或数据
  2. 不可变数据传递：如主题颜色、国际化语言等
  3. 组件复用：通过属性定制组件行为
// 示例：属性传递的组件
function Greeting({ name }) {
  return <h1>你好，{name}！</h1>;
}

// 父组件使用
<Greeting name="React" />
React_Props

⚠️ 常见误区

  • ❌ 不该用 props 存储组件内部数据
  • ❌ 状态不应直接依赖 props（除非是受控组件）
  • ❌ 避免在 props 中传递函数导致的副作用

🔄 状态与属性的联动

通过 props 传递的值可以作为状态的初始值： 

function Timer({ initialTime }) {
  const [time, setTime] = useState(initialTime);
  // ...
}

想了解更多？点击 React 组件通信指南 深入学习 👉

📝 小结

状态 属性
组件内部数据 父组件传递数据
可变 不可变
用于逻辑处理 用于数据传递

状态是组件自主管理的“变化源”，属性是组件间通信的“桥梁”！合理使用能让你的代码更清晰、可维护性更高 🚀

React_State_Props_Diagram