React setState 同步异步以及处理方式
问题描述
在同步执行流程中 setState 表现为异步，而在异步执行流程中 setState 表现为同步。
示例：有一个控制 DOM 节点显隐的状态值，默认为 false，而下一步就需要获取该 DOM 节点做一系类处理。所以一开始使用 setState 设置状态值为 true，让该 DOM 节点显示。在正常情况下，下一步应该可以获取到该 DOM 节点，但实际结果却拿不到
由此可见，setState 不是我们现象的那么简单。
内容分析
简单理解什么是队列？
队列属于常用的数据结构中的一种。其特点是：只允许在表的一端进行插入，表的另一端进行删除。所以只有最早进去的数据才会被最早删除，如果没有数据那就是个空队列。故队列又称为先进先出（FIFO—first in first out）线性表。
React 会把多个 setState() 调用合并成一个调用。
这句话的意思是：程序碰到一个 setState() 就会把这个方法放入队列中，如果一下子出现了多个 setState 操作，会一起放入队列中，以最后一个为主。
在正常的方法或者生命周期函数中，setState 表现为异步，如果是在延迟 setTimeOut 这类函数中，就会表现为同步。
注意 React@16.8 版本前后对
setTimeOut这类原生函数表现有区别，具体可查询
解决方法
- 直接传入一个函数
this.setState((state, props) => ({data: 111}))
- 加入第二个参数，第二个参数是个回调函数，可以在这个回调函数中获取到刚刚更新得到的值，不过这个值实在 render 方法执行完毕之后才进行回调的
this.setState({data: 111},function(){
console.log(this.state.data)
})
- 使用
promise + asyce进行封装
async function asyceSetState(state) {
new Promise((resolve, reject) => {
this.setState(state, () => { resolve() })
})
}
await asyceSetState({data: 111})
结尾
setState 实际上是使用了队列的方式，如果不对其进行处理，那就会呈现出异步的现象。