反应setState回调执行顺序

Question

  var SubOne = React.createClass({
    getInitialState(){
      return {
        current : 0
      };
    },

    render() {
      var that = this;
      var list = [
        1111,2222,3333,444
      ];
      var createItem = function(itemText, index) {
        return <li key={index} data-index={index} onClick={that._handleClick}>{itemText}</li>;
      };

      return <ul ref="list">{list.map(createItem)}</ul>;
    },

    componentDidMount(){
      var that = this;

      setTimeout(function(){
        that._handleClick();
      }, 2000);
    },

    _handleClick(){
      console.log("before setState");
      this.setState({
        current : 0
      },function(){
        console.log("setState callback");
      });
      console.log("after setState");
    }
  });

  React.render(<SubOne />, document.getElementById("example"));

The result is:

setTimeout call:

before setState setState callback after setState

onclick call:

before setState after setState setState callback

why the execution sequence is different?

Answer 1

This has to do with batching update mechanism of React. I'm not strong on the topic so I can't give you a clear answer, but maybe this discussion here would shed some light into you :) https://groups.google.com/forum/#!topic/reactjs/LkTihnf6Ey8

Answer 2

setState is asynchronous. From the docs :

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

Therefore you can only safely assume that the setState callback will be executed after the state has been mutated.