Question

假设我有两个电话：

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

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

由于setState是异步的，如何保证对它的第一次调用将首先执行？

Answer 1

setState（）的反应documentation中指出

setState() 排队更改组件状态，并告诉React该组件及其子级需要以更新后的状态重新呈现。 setState（）也是异步的，并且在同一周期内的多个调用可以一起批处理。例如，如果您尝试在同一周期内多次增加或向计数器添加值，则将导致以下结果：

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

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

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

React中this.setState的异步性质

1 个答案: