多个setState不会累积到一个更新/渲染中吗？

Question

我记得当我发现它setState是异步的时，我感到非常惊讶。现在，我偶然发现了一种“怪异”的行为，这种行为不符合我对setState异步性的理解。

考虑下面的代码片段（由于某种原因导致Script Error，这是外部沙箱：https :
//codesandbox.io/s/zwrvkz74y3）：

class SomeComponent extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      prop1: 1,

      prop2: 2

    };



    setTimeout(this.changeProp1.bind(this), 100);

  }



  componentDidUpdate() {

    console.info("componentDidUpdate called");

  }



  changeProp1() {

    this.setState({ prop1: 2 });

    this.changeProp2();

  }



  changeProp2() {

    this.setState({ prop2: 3 });

  }



  render() {

    const { prop1, prop2 } = this.state;

    return React.createElement('div', null, `prop1: ${prop1}, prop2: ${prop2}`);

  }

}



const rootElement = document.getElementById("root");

ReactDOM.render(React.createElement(SomeComponent), rootElement);


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如果运行此程序并检查控制台，您将看到该componentDidUpdate调用被两次调用，但是不应该setStates仅一次累积和更新Component吗？

更新 ：我认为我的困惑来自ReactJS网站上的“ 状态更新可能是异步的”部分中的这个短语：

React可以将多个setState（）调用批处理到单个更新中以提高性能。

Answer 1

正如参考资料的链接部分所述，

React 可以将 多个setState（）调用批处理到单个更新中以提高性能。

至少在React 16中，它 不应该 批量更新状态。

正如React团队的Dan Abramov在相关答案中所广泛解释的那样，该状态当前仅从事件侦听器中进行批量更新，也可以setState在生命周期挂钩（componentDidMount，componentDidUpdate）中进行同步调用。预计这将在React17中进行更改。

在React16中，unstable_batchedUpdates应该显式地使用它来无条件地批量更新状态（一个demo）：

setTimeout(() => {
  ReactDOM.unstable_batchedUpdates(() => {
    this.changeProp1();
  });
}, 100);