import React from 'react';

class App extends React.Component {
  state = {
    count: 0
  };

  render() {
    return (
      <div>
        <h1>Hello world</h1>
        <h2>Count: {this.state.count}</h2>
        <button
          onClick={() => this.setState(state => ({ count: state.count + 1 }))}
        >
          +
        </button>
        <button
          onClick={() => this.setState(state => ({ count: state.count - 1 }))}
        >
          -
        </button>
      </div>
    );
  }
}

export default App;

在上面的代码中，它有一个state带有property/state:count的对象。

状态可以简单地理解为特定组件/应用程序在那个时间点的值。在上面的例子中，当应用程序第一次运行时，应用程序是有状态的count === 0

正如我们所看到的，有两个按钮+并-使用 更新值this.setState，它只是更新应用程序计数的“状态”，并且应用程序将在状态更改时重新呈现

例如：

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  state = {
    show: false,
  }

  showTextToggle = () => {
    this.setState({ show: !this.state.show });
  }

  render() {
    const { show } = this.state;
    return (
      <div>
        <h3>Some title</h3>
        {show ? <div>Description</div> : undefined}
        <button onClick={this.showTextToggle}>Read more</button>
      </div>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

PS代码沙盒

现实生活中的状态示例：

在有人支持你的问题之前，你可以想象你的问题或认为它是问题组件vote state = 0，之后它变成 1 等等。因此与应用程序的交互改变了应用程序中的某些内容。改变的东西/值可以称为状态。

应用程序/组件中的状态可能会因交互性（事件）或时间而改变。

随着时间的推移，你可以想象这个帖子或Post Component在 30 分钟之前/一段时间前没有答案，即answer state = 0。现在它有一些（3）答案。于是answer state = 0改为answer state = 3。

状态只是组件/应用程序在特定时间所处的值。

想象一下你发布这个问题的具体时间点，现在看看这篇文章的变化。这种变化可以被认为是组件/应用程序状态的变化。

状态是 React 组件类的一个实例，可以定义为一组控制组件行为的可观察属性的对象。换句话说，组件的状态是一个对象，它保存了一些可能在组件的生命周期内发生变化的信息。例如，让我们想想我们在这篇文章中创建的时钟，我们每秒钟都显式地调用 render() 方法，但是 React 提供了一种更好的方法来实现相同的结果，那就是使用 State，存储时间作为组件状态的成员。我们将在本文后面更详细地研究这一点。