this.setState更新问题

this.setState是异步的，所以在this.setState之后不能立刻得到最新的state数据
关于如何获取最新的数据，有如下三种方法

1.回调函数

this.setState({
  xxx:'xxx',
}, () => {
  console.log(this.state.xxx)
});

2.利用组件生命周期函数componentDidUpdate

组件生命周期函数.png

this.setState后，在组件生命周期函数中查看修改内容

componentDidUpdate(){
    console.log(this.state.xxx);
}

3.利用setTimeout 延迟为0

setTimeout(()=> {
                this.setState({
                    xxx: '467',
                })
                console.log(this.state.xxx);
            }
        )

先来看看Runoob上setTimeout用法

image.png

当setTimeout 延迟为0时

componentDidMount () {
        console.log('a');
        setTimeout(function(){
            console.log('b');
        },0);
        console.log('c');
        console.log('d');
    }

执行结果

image.png
其中涉及的原理
JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序。

浏览器的内核是多线程的，它们在内核控制下相互配合以保持同步，一个浏览器至少实现三个常驻线程：JavaScript引擎线程，GUI渲染线程，浏览器事件触发线程。
JavaScript引擎是基于事件驱动单线程执行的，JavaScript引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JavaScript线程在运行JavaScript程序。
GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(Reflow)时,该线程就会执行。但需要注意，GUI渲染线程与JavaScript引擎是互斥的，当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JavaScript引擎空闲时立即被执行。
事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JavaScript引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax异步请求等，但由于JavaScript的单线程关系所有这些事件都得排队等待JavaScript引擎处理（当线程中没有执行任何同步代码的前提下才会执行异步代码）。

setTimeout有一个最小执行时间，当指定的时间小于该时间时，浏览器会用最小允许的时间作为setTimeout的时间间隔，也就是说即使我们把setTimeout的毫秒数设置为0，被调用的程序也没有马上启动。

这个最小的时间间隔是多少呢？

这和浏览器及操作系统有关。在John Resig的《Javascript忍者的秘密》一书中提到--Browsers all have a 10ms minimum delay on OSX and a(approximately) 15ms delay on Windows.（在苹果机上的最小时间间隔是10毫秒，在Windows系统上的最小时间间隔大约是15毫秒），另外，MDC中关于setTimeout的介绍中也提到，Firefox中定义的最小时间间隔（DOM_MIN_TIMEOUT_VALUE）是10毫秒，HTML5定义的最小时间间隔是4毫秒。

也即，setTimeout的延迟时间为0，就是放在队列后执行。

感谢
setTimeout那些事儿
关于this.setState更新的问题