深入剖析setState：React中不可或缺的状态管理利器

2023-11-11 13:17:21

在React中，setState是用于更新组件状态的API，地位不言而喻。但要使用好setState，一定要抓住三个关键词：合并更新、同步异步、不可变值。乍一看，有些小伙伴可能云里雾里~别急，我挨个解释。

1. 合并更新

setState并不是立即更新组件的状态，而是将多个setState操作合并为一次更新。这样做的好处是，可以减少不必要的渲染，提高性能。

例如，以下代码将导致组件渲染两次：

this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });

而以下代码只会导致组件渲染一次：

this.setState({ count: this.state.count + 2 });

2. 同步异步

setState可以是同步或异步的。同步setState意味着状态更新会在调用setState的函数执行后立即发生。异步setState意味着状态更新会在稍后发生，具体时间取决于React的更新调度器。

默认情况下，setState是异步的。这是因为React会将多个setState操作合并为一次更新，如果setState是同步的，那么每次调用setState都会导致组件渲染一次，这会严重影响性能。

但是，在某些情况下，你可能需要使用同步setState。例如，如果你需要在setState之后立即读取状态，那么你就可以使用同步setState。

要使用同步setState，你可以在setState的第二个参数中传入一个回调函数。这个回调函数将在状态更新后被调用。

this.setState({ count: this.state.count + 1 }, () => {
  console.log(this.state.count); // 2
});

3. 不可变值

setState只能更新组件的状态，不能修改组件的属性。这是因为React组件是不可变的。这意味着，一旦组件被创建，它的属性就不能被改变。

如果你想修改组件的属性，你必须创建一个新的组件。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };
  }

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

在上面的代码中，我们创建了一个名为MyComponent的组件。这个组件有一个名为count的状态。

当我们点击按钮时，我们会调用setState方法来更新count的状态。setState方法会将count的状态增加1，然后重新渲染组件。

因为React组件是不可变的，所以我们不能直接修改count的状态。我们必须创建一个新的组件，并将count的状态设置为新的值。