反应状态是什么？

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对象，其属性为/state:count。

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

我们可以看到，有两个按钮+和-使用this.setstate更新值，它只是更新应用程序计数的“状态”，每当状态发生变化时，应用程序将重新呈现