避不开的setState问题

本文转载自微信公众号「勾勾的前端世界」，作者西岭 。转载本文请联系勾勾的前端世界公众号。

我们提供的服务有：成都做网站、网站设计、外贸营销网站建设、微信公众号开发、网站优化、网站认证、新巴尔虎右ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的新巴尔虎右网站制作公司

异步的 setState

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

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

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

我们先来看一段代码：

 
 
 
    
  
  
  
  1. import React, { Component } from'react' 
    2.   
  
  
  2.  
    3.   
  
  
  3. exportclass States extends Component { 
    4.   
  
  
  4.   state = { 
    5.   
  
  
  5.     name:"lisi", 
    6.   
  
  
  6.     age:18 
    7.   
  
  
  7.   } 
    8.   
  
  
  8.  
    9.   
  
  
  9.   fun= ()=>{ 
    10.   
  
  
  10.     this.setState({ 
    11.   
  
  
  11.       name:'xiling' 
    12.   
  
  
  12.     }) 
    13.   
  
  
  13.     console.log(this.state.name) 
    14.   
  
  
  14.   } 
    15.   
  
  
  15.  
    16.   
  
  
  16.   render() { 
    17.   
  
  
  17.     return ( 
    18.   
  
  
  18.       
     
    19.   
  
  
  19.         
    State 组件
     
    20.   
  
  
  20.         
    {this.state.name}
     
    21.   
  
  
  21.         {this.fun()}}>点我 
    22.   
  
  
  22.       
 
  •     ) 
  •   } 
  • } 
  •  
  • exportdefault States 

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

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

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

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

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

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

     
 
 
      
  
  
  
    1. fun=async ()=>{ 
      2.   
  
  
    2.     awaitthis.setState({ 
      3.   
  
  
    3.       name:'xiling' 
      4.   
  
  
    4.     },()=>{ 
      5.   
  
  
    5.       console.log(this.state.name) 
      6.   
  
  
    6.     }) 
      7.   
  
  
    7.   } 
      8.

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

    当然可以!

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

     
 
 
      
  
  
  
    1. fun=async ()=>{ 
      2.   
  
  
    2.     awaitthis.setState({ 
      3.   
  
  
    3.       name:'xiling' 
      4.   
  
  
    4.     }) 
      5.   
  
  
    5.     console.log(this.state.name) 
      6.   
  
  
    6.   } 
      7.

    setState 的执行逻辑

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

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

     
 
 
      
  
  
  
    1. fun = ()=>{ 
      2.   
  
  
    2.     this.setState((state)=>{ 
      3.   
  
  
    3.       // 函数逻辑代码 …… 
      4.   
  
  
    4.       let returnData 
      5.   
  
  
    5.       returnData = state.age+1 
      6.   
  
  
    6.       // 最终返回一个state 对象 
      7.   
  
  
    7.       return { 
      8.   
  
  
    8.         age:returnData 
      9.   
  
  
    9.       } 
      10.   
  
  
    10.     }) 
      11.   
  
  
    11.   } 
      12.

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

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

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

    两次函数执行操作：

     
 
 
      
  
  
  
    1. fun = ()=>{ 
      2.   
  
  
    2.     this.setState((state)=>{ 
      3.   
  
  
    3.       return { 
      4.   
  
  
    4.         age:state.age+2 
      5.   
  
  
    5.       } 
      6.   
  
  
    6.     }) 
      7.   
  
  
    7.  
      8.   
  
  
    8.     this.setState((state)=>{ 
      9.   
  
  
    9.       return { 
      10.   
  
  
    10.         age:state.age+3 
      11.   
  
  
    11.       } 
      12.   
  
  
    12.     }) 
      13.   
  
  
    13.   } 
      14.

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

     
 
 
      
  
  
  
    1. fun = ()=>{ 
      2.   
  
  
    2.     this.setState({ 
      3.   
  
  
    3.       age:this.state.age+2 
      4.   
  
  
    4.     }) 
      5.   
  
  
    5.     this.setState({ 
      6.   
  
  
    6.       age:this.state.age+3 
      7.   
  
  
    7.     }) 
      8.   
  
  
    8.   } 
      9.

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

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

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

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

    (B站账号：西岭老湿)

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

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

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

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

    文章标题：避不开的setState问题
    文章网址：http://www.shufengxianlan.com/qtweb/news9/1259.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    ChatGPT知识

    同城分类信息

    响应式网站建设　　 　红光高低压开关厂　　 　高端品牌网站建设　　 　成都网站设计　　 　网络营销公司　　 　成都网站设计　　 　高端网站定制　　 　成都网站维护　　 　IDC机房托管　　 　犀浦门窗定制　　 　乐山电信机房　　 　九针服饰　　 　成都免费网站建设　　 　四川广汉锦华　　 　域名注册　　 　重庆网站营销　　 　商标注册　　 　成都企业网站建设　　 　国泰民安消防　　 　成都关键词SEO优化