当我们在ReactJS中使用this.setState()时会发生什么？

Question

当在React中使用this.setState()时状态实际发生变化时,我感到很困惑.这是我的JSX:

var Hello = React.createClass({
  getInitialState: function () {
    return {
      iterator: 0
    }
  },
  handleClick: function () {
    console.log(this.state.iterator);
    this.setState({
      iterator: this.state.iterator + 1
    })
    console.log(this.state.iterator)
  },
  render: function () {
    return <button onClick={this.handleClick}>{this.state.iterator}</button>;
  }
});

ReactDOM.render(
  <Hello name="World"/>,
  document.getElementById('container')
);

如您所见,我在调用this.setState()之前和之后记录迭代器的状态.但无论如何,它都记录了相同的数字.在我第一次单击按钮之后,我希望分别记录0和1,但它们都记录0和0.而在第二次点击时,它们记录1和1.那么状态实际上是什么时候发生变化以及究竟发生了什么这里？

Answer 1

引用https://reactjs.org/docs/react-component.html#setstate

将其setState()视为请求而非立即更新组件的命令.为了获得更好的感知性能,React可能会延迟它,然后在一次通过中更新几个组件.React不保证立即应用状态更改.

setState()并不总是立即更新组件.它可以批量推迟更新或推迟更新.这使得在调用setState()之后立即读取this.state是一个潜在的陷阱.相反,使用 componentDidUpdate或setState回调(setState(updater, callback))

第二个(可选)参数是一个回调函数,它将在setState完成并重新呈现组件后执行:

this.setState({
    iterator: this.state.iterator+1
  }, function(){
    console.log(this.state.iterator) 
});