为什么React状态是初始化状态而不是我刚刚设置的状态？

Question

I have the following code:

var Try = React.createClass({displayName: "Try",
  getInitialState: function() {
    return {
        int: 'x'
    };
  },
  ck: function() {
    this.setState({int: 1});
    console.log(this.state.int);
  },
  render: function() {
    return (
      React.createElement("div", {onClick: this.ck}, "Hello")
    );
  }
});

React.render(React.createElement(Try, null), $('body')[0]);

Try it here: http://codepen.io/rlog/pen/qdvVEK/

When I click Hello div for the first time, the log is x . Why isn't it 1 ?

Answer 1

According to the documentation:

setState() does not immediately mutate this.state but creates a pending state transition . Accessing this.state after calling this method can potentially return the existing value.

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

setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate(). If mutable objects are being used and the logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

Component API @ React docs

You can use optional second parameter that is a callback function to get the changed value after the setState is completed.

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

The second (optional) parameter is a callback function that will be executed once setState is completed and the component is re-rendered.

http://codepen.io/anon/pen/JdzONa