Question

我知道状态允许我们创建动态且交互式的组件，但是我想深入了解状态。

有人可以通过一个真实的例子帮助我理解React中的状态吗？

Answer 1

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 === 0

我们可以看到有两个按钮+和-使用this.setState更新值，它只是更新了应用程序计数的“状态”，应用程序将状态改变时重新渲染

Answer 2

例如：

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);

P.S。 CodeSandBox

Answer 3

现实生活中的例子：

在有人赞成您的问题之前，您可以想象您的问题，或者将其视为问题部分具有vote state = 0，然后变成1，依此类推。因此，与应用程序的交互性改变了应用程序中的某些内容。改变的东西/价值可以称为状态。

应用程序/组件中的状态可能会由于交互（事件）或在一段时间内发生变化。

随着时间的流逝，您可以想象此帖子或Post Component在30分钟前或一段时间前没有答案，即answer state = 0。现在，它有了一些（3）答案。因此answer state = 0更改为answer state = 3。

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

想象一下您发布此问题的具体时间点，现在可以看到这篇文章中的更改。可以将这种更改视为组件/应用程序状态的更改。

Answer 4

状态允许您创建动态且交互式的组件。

它包含有关应用程序当前状态的信息。您可以通过执行以下操作将变量和数据保留在React应用的本地状态中

class App extends Component{
    state = {
        didUserLogin: false
    }
}

然后，您可以使用直接访问状态，

    console.log(this.state.didUserLogin);

或用

更新

    this.setState({didUserLogin: true});

当您继续操作状态内部的数据时，将使用您为状态提供的信息来更新使用状态的组件。

更多信息，

Answer 5

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

Answer 6

class App extends Component {
    constructor(props){
        super(props);
        this.state = {products: []};
    }

    render() {
        console.log(this.state);
        return (
            <div className="container">
            </div>
        );
    }
}

在最新的反应中，我们现在可以将状态定义为纯JavaScript对象，然后render方法可以正确获取状态。这是状态作为构造函数外部的普通对象的示例：

In the latest react, we now can define state as a plain JavaScript object and the render method gets it correctly. Here is an example of state as a plain object outside constructor:

class App extends Component {
    constructor(props){
        super(props);
    }
    state = {products: []}
    
    render() {
        console.log(this.state);
        return (
            <div className="container">
            </div>
        );
    }
}

更多详细信息 https://www.codegreet.com/how-to-use-state-in-reactjs/

React中的状态是什么？

6 个答案: