前端 | React setState 同步异步以及处理方式 | React

前端 | React setState 同步异步以及处理方式 | React

问题描述

在同步执行流程中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实际上是使用了队列的方式，如果不对其进行处理，那就会呈现出异步的现象。

本期的内容就到这里，路过的小伙伴记得支持一下哦！

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