React的异步更新的setState

先上个代码：

var Text = React.createClass({
            getInitialState: function() {
                return {name: "react"};
            },
            keyUp: function(e){
                this.setState({name: e.target.value});
                console.log(this.state.name);
            },
            render: function() {
                return (
                    <div className="a">
                        大家好，我是用{this.state.name}渲染出来的！
                        <input onKeyUp={this.keyUp} />
                    </div>
                );
            }
        });

        ReactDOM.render(
            <Text></Text>,
            document.getElementById('well')
        );

我们在setState下面加了一个console，通过控制台可以发现，每次打印的值并不是当前输入的值，而是上一次输入的值，这是怎么回事呢？ 
在setState中，这是一个异步处理的函数，并不是同步的，console在setState后立刻执行了，所以这时候状态还没有真正变更完，所以这里取到的状态仍旧是更新前的  
如果需要在更新状态后，再执行操作怎么办呢，setState还有第二个参数，接受一个callback，我们尝试将keyUp中代码改成这样

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

传入 setState 函数的第二个参数的作用是什么？

该函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成：

this.setState(
  { username: 'tylermcginnis33' },
  () => console.log('setState has finished and the component has re-rendered.')
)

这时候log打印出来的只就是我们期望的内容，当每次状态更新成功后，都会调用传进去的callback函数。

因此总结如下： 

react中的setState特点： 

1.是异步操作函数；

 
2.组件在还没有渲染之前, this.setState 还没有被调用； 

3.批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setState的来的快)。