Question

案例1

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

案例2

increaseScoreBy3 () {
 this.setState({score : ++this.state.score});
 this.setState({score : ++this.state.score});
 this.setState({score : ++this.state.score});
}

我正在阅读this 文章，并了解React的setState函数是异步的。我的问题是为什么在案例1中进行批处理而不是在案例2中进行批处理？根据文章，反应将批量调用setState，因此在两种情况下结果应相同，但不会发生。请给我一个理由。

Answer 1

React 可能批量后续通话，但无法保证。在React Docs中甚至有一个例子：

这种形式的setState（）也是异步的，并且在同一周期内的多个调用可以一起批处理。例如，如果您尝试在同一周期中多次增加项目数量，则会产生相当于：

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

后续调用将覆盖同一周期中先前调用的值，因此数量只会递增一次。如果下一个状态取决于先前的状态，我们建议使用更新程序功能表单，而不是：

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

Source

通常，依赖异步值更改是一个坏主意。这适用于与异步相关的任何内容。

Answer 2

在案例2中，您正在使用JS运算符来修改商店值，这是不好的。

请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment

React setState的未知行为

2 个答案: