反应原生 setState 对象 - JavaScript

在 React 中，setState() 方法是一种改变组件状态的方式，以更新视图。在 React 中的性能非常高效且易于管理。当您以 React 的方式实例化组件时，React 将控制组件状态的状态值存储在该组件的属性中。组件状态可以由组件本身维护，并与 React 当前状态同步。

使用setState进行状态更新

在 React 中，我们使用setState()方法来更新组件的状态。在此方法调用后，React 会将状态对象与当前组件状态进行合并并进行重置。

在下面的示例中，我们有一个用于存储组件状态的构造函数。

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

在上面的代码中，ExampleComponent组件有一个count属性，用于跟踪按钮点击的次数。通过单击按钮时调用的 onClick()处理程序中的setState()方法更新计数器。在这里，我们更新count属性，将其设置为其当前值加上 1。setState()方法导致 React 重新渲染组件，反映出更新后的状态。

使用函数更新状态

React 还允许您使用异步回调函数更新状态。您可以传递根据当前状态更新状态的函数。

在下面的示例中，我们使用函数作为setState的参数，该函数仅接收组件当前状态的引用。

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState((state) => {
      return { count: state.count + 1 };
    });
  }
  
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>
          Click me
        </button>
      </div>
    );
  }
}

在这个例子中，我们定义了一个叫做handleClick()的函数，该函数在单击按钮时被调用。handleClick()函数通过以前的状态作为参数来调用setState()，并根据先前的状态返回更新。

在上面的例子中，setState()是如何工作的便好理解了。作为第一个参数传递给setState()的函数只取决于组件状态的属性。在本例中，我们只有一个属性，count。

总结

React 的setState()方法是一种改变组件状态的方式。通过状态更新，React 可以有效地通知 DOM 中的任何更改，避免了昂贵的 DOM 操作。setState()序列化所有更新，可以一次计算多个更新。使用setState()方法时，您可以传递一个function()作为参数，该函数可以根据先前的状态计算出任何更改。