React setState同步异步以及处理方式

结论：setState实际上是使用了队列的方式，如果不对其进行处理，那就会呈现出异步的现象。

队列介绍：队列属于常用的数据结构中的一种。

　　特点：只允许在表的一端进行插入，表的另一端进行删除。所以只有最早进去的数据才会被最早删除，如果没有数据那就是个空队列。故队列又称为先进先出（FIFO—first in first out）线性表。

React会把多个setState()调用合并成一个调用。这句话的意思是程序碰到一个setState()就会把这个方法放入队列中，如果一下子出现了多个setState操作，会一起放入队列中，以最后一个为主。

在正常的方法或者生命周期函数中，setState表现为异步，如果是在延迟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})