React中异步的setState

React的state是个好东西。
配合this.setState方法，state一发生改变就会重新渲染页面。
解放了我们之前各种操作dom的费劲。

然而在逐步使用React的过程中，会出现这种情况，例如：

页面中有一个下拉框，下拉框的选项分别为苹果，香蕉，橘子。
还有一个内容框，用来展示苹果，香蕉，橘子的具体信息，每种水果的内容框样式不同。

因为用户可能不会三种水果的具体信息都想知道，所以每次选中了哪个水果，就从后台获取哪个水果的信息。

如果苹果，香蕉，橘子的type分别为1，2，3；
点击下拉框选中香蕉，要setState，使this.state.type = 2，来切换香蕉的内容框样式。同时去后台请求香蕉的数据。

此时刚做React不久的同学经常会写成，拿this.state.type的值直接去拼接参数来调取数据，然后就会发现，this.state.type并不是2，仍然是上一次的值。

这说明了this.setState（）是一个异步的方法。

这种情况给开始用React不久的同学带了了很多困扰。

有同学很聪明想到了设置全局变量来实时保存所需变量。

但其实this.setState是有两个参数的，而第二个参数就是我们所需要的异步回调函数，它会在setState执行完毕之后再调用。看代码：

……
//构造函数中的初始值
this.state={
  type:1
}
……
//点击下拉框时
this.setState(
  {type:2},
  ()=>{console.log(this.state.type)}
)
//输出 2

需要注意的是：第二个参数，回调函数是this.setState的方法，所以要注意它的this指向，写成箭头函数会指向this.setSate，如果没有绑定this，直接console.log的话，实际相当于调用了组件的方法，在组件里打印了state的值，仍旧是1。