等待后多次调用 setState

Question

我在Codepen写了一个测试用例

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

从控制台日志可以看到，即使我多次调用setState之前 await，它也只会更新组件一次。

但是如果我多次调用setState之后 await，它也会多次更新组件。

知道为什么会这样吗？

代码：

/*
 * A simple React component
 */
class Application extends React.Component {

  state = {
    value: 0
  }

  onClickHandler = (e) => {
    this.runAsyncFunc();
  }

  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: 1 });
    this.setState({ value: 1 });
    this.setState({ value: 1 });
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('updated');
  }

  render() {
    return <div>
      <p>{this.state.value}</p>
      <button onClick={this.onClickHandler}>RUN TEST</button>
      <p>Please check from Browser Console's Log</p>
    </div>;
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

Answer 1

这是因为this answer states React 尝试批量处理setState 调用并尽可能一起处理它们。但异步计算并非如此，因为 React（以及一般任何人）无法预测和重现 setState 的异步调用顺序。

因此，在您的情况下，它会退回到仅更新状态 3 次。

Answer 2

您可以从 React.Component 生命周期文档 (https://reactjs.org/docs/react-component.html) 获得此答案

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

使用此方法shouldComponentUpdate()。如果没有理由应用新的渲染，此方法允许您的组件退出更新生命周期。开箱即用， shouldComponentUpdate() 是一个返回 true 的无操作。这意味着每次我们在组件中启动更新时，我们都会重新渲染。

我添加更多代码

  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 });
  }

查看我的Codepen

所以如果你想防止不必要的渲染自定义方法shouldComponentUpdate