什么是 React 中的状态

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。

状态可以简单地理解为特定组件/应用的时间点的值。在上面的示例中，当应用首次运行时，应用的状态为 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);

附言代码沙盒

Answer 3

现实生活中的状态示例：

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

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

随着时间的推移，您可以想象这篇文章或Post Component在 30 分钟/前段时间没有答案，即answer state = 0。现在它有一些 （3） 个答案。所以answer state = 0改为answer state = 3.

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

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

Answer 4

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

Answer 5

状态

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

它包含有关应用当前状态的信息。你可以通过以下方式将变量和数据保存在 React 应用程序的本地状态中，

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

然后，您可以使用以下方法直接访问状态：

    console.log(this.state.didUserLogin);

或更新它，

    this.setState({didUserLogin: true});

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

更多信息，

• https://thinkster.io/tutorials/understanding-react-state
• https://reactjs.org/docs/state-and-lifecycle.html

Answer 6

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

在最新的 react 中，我们现在可以将状态定义为一个普通的 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/