React中this.setState的异步性质

Question

假设我有这两个电话：

 this.setState((prevState, props) => ({
    counter: prevState.counter + props.increment
 }));

 this.setState((prevState, props) => ({
    counter: prevState.counter + props.increment + 1
 }));

因为setState是异步的，所以如何保证第一次调用它会先执行？

Answer 1

从setState（）的react 文档中可以看出

setState()将对组件状态的更改排入队列 ，并告诉React需要使用更新后的状态重新呈现此组件及其子组件。 setState（）也是异步的， 同一循环中的多个调用可以一起批处理 。 例如，如果您尝试在同一周期中多次向计数器增加或添加值，则会产生等效于：

Object.assign(
  previousState,
  {counter: previousState.counter + props.increment},
  {counter: previousState.counter + props.increment + 1},
  ...
)

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

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