解读 React 中 props 和 state 的区别

在 React 中，props 和 state 都是 JavaScript 对象，它们都用于存储信息，以便控制组件的渲染输出。然而，它们之间存在着一些关键区别。

1. 数据源

props 的数据源是组件的父组件，而 state 的数据源是组件本身。这意味着，props 的值是由父组件决定的，而 state 的值是由组件自己决定的。

2. 数据的改变

props 的值只能由父组件改变，而 state 的值可以由组件自己改变。这意味着，props 的值是不可变的，而 state 的值是可变的。

3. 渲染的影响

props 的改变会触发组件的重新渲染，而 state 的改变也会触发组件的重新渲染。然而，state 的改变只会触发组件本身的重新渲染，而 props 的改变会触发组件及其所有子组件的重新渲染。

4. 使用场景

props 通常用于在组件之间传递数据，而 state 通常用于存储组件自己的数据。例如，props 可以用来将父组件的数据传递给子组件，而 state 可以用来存储组件的当前状态。

以下是一些代码示例，以便您更直观地了解 props 和 state 的区别：

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <ChildComponent count={this.state.count} />
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Count: {this.props.count}</h1>
      </div>
    );
  }
}

// 在父组件中改变 state 的值
ParentComponent.prototype.incrementCount = function() {
  this.setState({
    count: this.state.count + 1
  });
};

在这个示例中，父组件 ParentComponent 有一个 state 属性 count，它被用来存储组件的当前计数。父组件还定义了一个方法 incrementCount，它可以用来增加计数的值。子组件 ChildComponent 有一个 props 属性 count，它被用来显示父组件传递过来的计数值。

当父组件调用 incrementCount 方法时，state 的值会改变，这会导致父组件和子组件重新渲染。子组件的渲染输出也会随之改变，以显示新的计数值。

希望通过本文，您已经理解了 React 中 props 和 state 的区别。如果您还有任何疑问，请随时提问。