Javascript 等待后多次调用setState

我已经用英语写了一个测试用例

单击按钮运行测试，然后从浏览器控制台查看结果

您可以从控制台日志中看到，即使我在

wait

之前多次调用了

setState

，它也只会更新组件一次

但是如果在等待之后多次调用

setState

，它也会多次更新组件

知道为什么会这样吗

代码：

/*
*简单反应组分
*/
类应用程序扩展了React.Component{
状态={
数值：0
}
onClickHandler=（e）=>{
this.runAsyncFunc（）；
}
runAsyncFunc=async（）=>{
console.log（'beforeawait'）；
this.setState（{value:1}）；
this.setState（{value:1}）；
this.setState（{value:1}）；
等待设置超时（（）=>{}，2000）；
console.log（'AFTER wait'）；
this.setState（{value:1}）；
this.setState（{value:1}）；
this.setState（{value:1}）；
}
componentDidUpdate（prevProps、prevState、快照）{
console.log（'updated'）；
}
render（）{
返回
{this.state.value}

运行测试
请查看浏览器控制台的日志

;
}
}
/*
*将上述组件渲染到div#应用程序中
*/
React.render（，document.getElementById（'app'））；

您可以从React.Component life cycle doc（）

componentDidUpdate（）在更新发生后立即调用。初始渲染时不调用此方法。

使用此方法

shouldComponentUpdate（）

。如果没有理由应用新渲染，此方法允许组件退出更新生命周期。开箱即用，shouldComponentUpdate（）是返回true的no op。这意味着每次在组件中启动更新时，我们都将重新渲染

我添加了更多代码

  shouldComponentUpdate = function(nextProps, nextState) {
    return nextState.value !== this.state.value;
  }

  // Change value will set after await
  runAsyncFunc = async() => {
    console.log('BEFORE AWAIT');
    this.setState({ value: 1 });
    this.setState({ value: 1 });
    this.setState({ value: 1 });

    await setTimeout(()=>{}, 2000);

    console.log('AFTER AWAIT');
    this.setState({ value: 2 });
    this.setState({ value: 2 });
    this.setState({ value: 2 });
  }

检查我的

因此，如果要防止不必要的渲染，自定义方法

应该更新组件
这是因为as React尝试批处理
设置状态
调用，并在可能的情况下一起处理它们。但异步计算的情况并非如此，因为React（以及一般任何人）无法预测和再现
setState
异步调用的顺序

因此，在您的情况下，它会退回到仅更新状态3次。
setTimeout不会返回可以等待的承诺。这也很有帮助，setState本身是异步的，如果可以的话，React将平坦前三个调用。@remix23我知道setState是一个异步调用，但为什么每次调用setState时都会在等待后触发它？我并没有试图阻止不必要的渲染。我只是想知道为什么在wait之后，每当调用setState时它都会触发componentDidUpdate（）
  shouldComponentUpdate = function(nextProps, nextState) {
    return nextState.value !== this.state.value;
  }

  // Change value will set after await
  runAsyncFunc = async() => {
    console.log('BEFORE AWAIT');
    this.setState({ value: 1 });
    this.setState({ value: 1 });
    this.setState({ value: 1 });

    await setTimeout(()=>{}, 2000);

    console.log('AFTER AWAIT');
    this.setState({ value: 2 });
    this.setState({ value: 2 });
    this.setState({ value: 2 });
  }