React 中 state 和 props 的区别

在 React 中，state 和 props 是两个核心概念，它们都用于管理组件的数据，但它们的用途和行为有显著的区别。以下是它们的主要区别：

1. 定义与来源

• state:

  • state 是组件内部管理的状态数据，是组件自身的私有数据。
  • 它通常用于存储组件内部的可变数据，例如用户输入、组件状态（如是否展开）等。
  • state 可以通过 useState（函数组件）或 this.state（类组件）来定义和更新。

• props:

  • props 是组件的输入数据，通常由父组件传递给子组件。
  • props 是只读的，子组件不能直接修改 props，只能通过父组件更新。
  • props 用于组件之间的数据传递和通信。

2. 可变性

• state:

  • state 是可变的，组件可以通过 setState 或 useState 的更新函数来修改它。
  • 修改 state 会触发组件的重新渲染。

• props:

  • props 是不可变的（只读），子组件不能直接修改 props。
  • 如果需要更新 props，必须通过父组件传递新的 props。

3. 作用范围

• state:

  • state 是组件私有的，只能在组件内部访问和修改。
  • 其他组件无法直接访问或修改该组件的 state。

• props:

  • props 是组件之间共享的，父组件可以通过 props 向子组件传递数据。
  • 子组件可以通过 props 接收父组件的数据。

4. 使用场景

• state:

  • 用于管理组件内部的状态，例如表单输入、开关状态、计数器等。
  • 适合存储组件自身的动态数据。

• props:

  • 用于组件之间的数据传递，例如将父组件的数据传递给子组件。
  • 适合存储从外部传入的静态或动态数据。

5. 示例

// 父组件
function ParentComponent() {
  const [count, setCount] = useState(0); // state

  return (
    <div>
      <ChildComponent count={count} /> {/* 通过 props 传递数据 */}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// 子组件
function ChildComponent({ count }) { // 通过 props 接收数据
  return <div>Count: {count}</div>;
}

• 在这个例子中：
  • count 是父组件的 state，父组件通过 setCount 修改它。
  • count 通过 props 传递给子组件 ChildComponent，子组件只能读取 count，不能修改它。

6. 总结

理解 state 和 props 的区别是掌握 React 组件设计的关键，合理使用它们可以构建出高效、可维护的组件结构。