0
点赞
收藏
分享

微信扫一扫

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

zhyuzh3d 2023-09-30 阅读 35

前端 | 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同步异步以及处理方式
举报

相关推荐

0 条评论