Props 和 State 有什么区别？

在 React 中，组件是构建应用程序的基本单位。 Props 和 State 是 React 组件中最重要的概念之一。虽然这两个概念都是用于描述组件的数据，但它们之间有一些关键的区别。

Props

Props 是从父组件传递给子组件的数据。它是一个不可变的对象，只能被父组件更改。从父组件传递 Props 给子组件是单向的，子组件不能修改 Props 的值，只能通过父组件传递新的 Props 来更新组件。

在 React 中，Props 被用来描述组件的不同状态，以及渲染不同的 UI。Props 可以是任何 JavaScript 对象，包括字符串、数字、布尔值、数组、甚至其他组件。

以下是 Props 的一些使用示例：

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="Bob" />;
}

在这个例子中，我们定义了一个简单的组件 Greeting，在 App 组件中使用它并传递了一个 Props name 来显示一个问候语。

State

State 是组件内部管理自身状态的机制。与 Props 不同，State 是可变的，在组件内部可以修改。State 应该只包含与组件自身相关的信息，不应该包含任何从父组件传递的 Props。

在 React 中，当组件的 State 发生变化时，React 会自动重新渲染组件的 UI。

以下是 State 的一些使用示例：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

在这个例子中，我们定义了一个组件 Clock，通过 State 对象保存当前时间，并且定时器每秒钟更新 State 来重新渲染 UI。

总结

在 React 中，Props 和 State 分别用于描述组件的输入和内部状态。 Props 是一个不可变的对象，只能从父组件传递给子组件。 State 是一个可变的对象，允许组件在自身内部管理其状态。

使用 Props 和 State，你可以构建复杂的 React 应用程序，并在组件之间传递信息。理解它们之间的区别是成为一个优秀 React 程序员的重要一步。