JavaScript为什么调用react setState方法不会立即改变状态？

Question

我正在阅读reactjs文档的Forms部分，只是尝试了这段代码来演示用法（JSBIN）。

onChange

var React= require('react');

var ControlledForm= React.createClass({
    getInitialState: function() {
        return {
            value: "initial value"
        };
    },

    handleChange: function(event) {
        console.log(this.state.value);
        this.setState({value: event.target.value});
        console.log(this.state.value);

    },

    render: function() {
        return (
            <input type="text" value={this.state.value} onChange={this.handleChange}/>
        );
    }
});

React.render(
    <ControlledForm/>,
  document.getElementById('mount')
);

当我<input/>在浏览器中更新值时，回调console.log内的第二个与第一个handleChange相同，为什么在回调范围内看不到结果？value``console.log``this.setState({value: event.target.value})``handleChange

Answer 1

从React的文档中：

setState()不会立即变异，this.state但会创建待处理的状态转换。this.state调用此方法后进行访问可能会返回现有值。无法保证对呼叫的同步操作，setState并且可以为提高性能而对呼叫进行批量处理。

如果要在状态更改后执行函数，请将其作为回调传递。

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});