避不开的 setState 问题

共 3039字,需浏览 7分钟

 ·

2021-09-11 10:51

异步的 setState


“setState 是异步还是同步的?”


这是一个面试中经常会被问到的经典面试题。


在开始讲解异步特性之前,我们需要先明确,从 API 层面上说,它就是普通的调用执行的函数 ,自然是同步 API 。因此,这里所说的同步和异步,指的是
API 调用后,state 的改变或者更新 DOM 的时机,是同步还是异步的。


我们先来看一段代码:

import React, { Component } from'react'
exportclass States extends Component { state = { name:"lisi", age:18 }
fun= ()=>{ this.setState({ name:'xiling' }) console.log(this.state.name) }
render() { return ( <div> <h2>State 组件</h2> <p>{this.state.name}</p> <buttononClick={()=>{this.fun()}}>点我</button> </div> ) }}
exportdefault States


代码实现的的功能非常简单,就是在点击按钮后,修改 state 中的 name 属性值。事件处理函数中,是在调用 setState 方法之后,又将 state 的值打印到了控制台。运行代码你会发现, Dom 中的值发生了改变,但是控制台却是之前的结果值。


如果你对异步的运行规则比较熟悉,你一定不会感到奇怪。很显然,this.setState() 是异步执行的,调用之后,后面的代码就紧跟着执行了,因此,控制台打印的结果肯定是修改之前。


因此,我们可以确定,this.setState() 确实是异步调用执行的代码。


注意,此时,你可以将 this.setState() 当作普通的异步执行代码(再次强调 JSX 就是 JS)。


那么,如果我想调整代码获取异步执行结果,应该怎么做呢?


既然可以看作为普通的异步代码,想想也知道,其实 this.setState() 方法还提供了第二个参数,我们可以传入一个回调函数,这个函数就是异步结束后执行的回调函数,具体代码修改如下:

  fun=async ()=>{    awaitthis.setState({      name:'xiling'    },()=>{      console.log(this.state.name)    })  }


回调函数处理异步结果本来就是传统的异步编码方式,但是,我们也知道,异步中的回调函数有一个最大的问题就是 “回调地狱”,那么既然是异步,我们是不是就可以封装一个 Promise 了呢?


当然可以!


但是,封装一个 Promise 就显得有些复杂。最简单的方式就是借助 ES 2017 中异步调用函数 async/ await 来实现。我们直接修改事件处理函数即可,具体语法规则如下:

 fun=async ()=>{    awaitthis.setState({      name:'xiling'    })    console.log(this.state.name)  }


setState 的执行逻辑

在使用 this.setState() 进行状态更改时,需要进行逻辑处理应该怎么做呢?


其实 this.setState() 的第一个参数是可以接收一个函数处理的。需要注意的是,函数的运行必须返回一个 state 对象,具体代码如下:

  fun = ()=>{    this.setState((state)=>{      // 函数逻辑代码 ……      let returnData      returnData = state.age+1      // 最终返回一个state 对象      return {        age:returnData      }    })  }


也就是说 this.setState() 既可以接收对象参数,也可以接收一个处理函数


那么,这两者又有什么区别呢?


在时间处理函数中,我们分别使用两次 this.setState() 对 state 进行修改操作。


两次函数执行操作:

  fun = ()=>{    this.setState((state)=>{      return {        age:state.age+2      }    })
this.setState((state)=>{ return { age:state.age+3 } }) }


运行代码可以发现,两次 this.setState() 中的函数都得到了执行,修改了 state 的值。我们再将同样的代码逻辑,使用对象数据的方式进行修改操作:

  fun = ()=>{    this.setState({      age:this.state.age+2    })    this.setState({      age:this.state.age+3    })  }


结果显示,只有最后一次 this.setState() 得到了执行


没错,this.setState() 如果是函数,那么函数会依次从上往下执行;而如果是一个对象, React 会将多次 this.setState() 的调用合并为一次执行,如果修改了相同的值,则会将前面的修改替换成最后一次的修改数据。


这一点在项目编码中一定要牢记,避免出现意外的逻辑 Bug。


你可能会问,这到底是什么原理呢?我曾经针对这个问题做过一场专门的技术分享直播,直播的录屏回放在这里,感兴趣可以看看:https://www.bilibili.com/video/BV19P4y1W7hX。

(B站账号:西岭老湿)


但是,对于新手来说,我建议你先收藏,因为你现在真的可能看不懂。


当然,你可能也发现了一个问题,我们说了那么多关于组件状态的问题,各种实验编码都是在 class 类组件中完成的,那函数组件中是不是和类组件一样呢?


嗯~ o( ̄▽ ̄)o……,因为 state 是类组件中的特性,而函数组件中的 state,需要具备 Hook 特性的知识作为铺垫,所以,暂时我们先留个坑,等着后面来填就行了。


截至到目前,我们已经掌握了组件的概念、组件的传值、以及组件状态的相关内容。


推荐阅读:

拆解高频面试题:你是如何理解单向数据流的?

React 入门第五步:组件布局小案例

面试官:“宝子,setState 是同步还是异步的呀?”

恭喜你又在前端道路上进步了一点点。

点个“在看”和“”吧!

浏览 29
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报