Question

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 1
    }
  }
  componentDidMount() {
    this.setState({
      num: this.state.num+1
    });
    this.setState({
      num: this.state.num+1
    });
  }
  render() {
    return (
      <div>
        { this.state.num }
      </div>

    )
  }
}

在componentDidMount中两次调用setState使用+1更新num，但最终num是2

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 1
    }
  }
  componentDidMount() {
    this.setState({
      num: ++this.state.num
    });
    this.setState({
      num: ++this.state.num
    });
  }
  render() {
    return (
      <div>
        { this.state.num }
      </div>

    )
  }
}

setState使用自动增量更新num，但最终num为3。

两种方法有什么区别？以及如何了解setState如何更新状态？

谢谢

Answer 1

setState是异步的，因此在更新状态时您不能依赖当前状态。请参阅this文档，尤其是讨论类似示例的部分：

这种形式的setState（）也是异步的，并且在同一周期内的多个调用可能被批处理在一起。例如，如果您尝试在同一循环中多次增加项目数量，则将导致以下结果：... etc

Answer 2

setState是异步的，它返回this之后。state尚未更改：

this.setState({
  num: this.state.num+1 // this.state.num is 1, so the value here is 2
});
this.setState({
  num: this.state.num+1 // this.state.num is still 1, so the value is still 2
});

所以与

相同

this.setState({
  num: 2
});
this.setState({
  num: 2
});

但是，在第二个示例中，您正在对this.state.num进行突变

this.setState({
  num: ++this.state.num // this.state.num is 2 after increment
});
this.setState({
  num: ++this.state.num // this.state.num is 3 after incrementing again
});

这实际上与

相同

this.setState({
  num: 2
});
this.setState({
  num: 3
});

通常，调用setState并基于this.state计算新值不是一个好主意。如果要基于状态中的当前值更改状态，请不要访问this.state！而是给setState回调：

setState(state => ({ num: state.num + 1 })

考虑来自ReactJS docs的示例：

例如，如果您尝试一次增加一件商品的数量周期，将导致以下结果：

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

后续呼叫将覆盖同一呼叫中先前呼叫的值周期，因此数量只会增加一次。如果下状态取决于当前状态，我们建议使用更新程序函数形式，而不是：

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

setState增量和react中的每个增量1之间有什么区别

2 个答案: