面试官：说说React中的SetState执行机制

本文转载自微信公众号「JS每日一题」，作者灰灰 。转载本文请联系JS每日一题公众号。

创新互联专注于黄平企业网站建设,响应式网站设计,成都做商城网站。黄平网站建设公司,为黄平等地区提供建站服务。全流程按需网站建设，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

一、是什么

一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state

当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用

如下例子：

 
 
 
 
    
  
  
  
  
  1. import React, { Component } from 'react' 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. export default class App extends Component { 
    4. 
  
  
  
  
  4.     constructor(props) { 
    5. 
  
  
  
  
  5.         super(props); 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.         this.state = { 
    8. 
  
  
  
  
  8.             message: "Hello World" 
    9. 
  
  
  
  
  9.         } 
    10. 
  
  
  
  
  10.     } 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.     render() { 
    13. 
  
  
  
  
  13.         return ( 
    14. 
  
  
  
  
  14.             
     
    15. 
  
  
  
  
  15.                 
    {this.state.message}
     
    16. 
  
  
  
  
  16.                  this.changeText()}>面试官系列 
    17. 
  
  
  
  
  17.             
 
  •         ) 
  •     } 
  •  
  •     changeText() { 
  •         this.setState({ 
  •             message: "JS每日一题" 
  •         }) 
  •     } 
  • } 

    • 通过点击按钮触发onclick事件，执行this.setState方法更新state状态，然后重新执行render函数，从而导致页面的视图更新

    如果直接修改state的状态，如下：

     
 
 
 
      
  
  
  
  
    1. changeText() { 
      2. 
  
  
  
  
    2.     this.state.message = "JS每日一题"; 
      3. 
  
  
  
  
    3. } 
      4.

    我们会发现页面并不会有任何反应，但是state的状态是已经发生了改变

    这是因为React并不像vue2中调用Object.defineProperty数据响应式或者Vue3调用Proxy监听数据的变化

    必须通过setState方法来告知react组件state已经发生了改变

    关于state方法的定义是从React.Component中继承，定义的源码如下：

     
 
 
 
      
  
  
  
  
    1. Component.prototype.setState = function(partialState, callback) { 
      2. 
  
  
  
  
    2.   invariant( 
      3. 
  
  
  
  
    3.     typeof partialState === 'object' || 
      4. 
  
  
  
  
    4.       typeof partialState === 'function' || 
      5. 
  
  
  
  
    5.       partialState == null, 
      6. 
  
  
  
  
    6.     'setState(...): takes an object of state variables to update or a ' + 
      7. 
  
  
  
  
    7.       'function which returns an object of state variables.', 
      8. 
  
  
  
  
    8.   ); 
      9. 
  
  
  
  
    9.   this.updater.enqueueSetState(this, partialState, callback, 'setState'); 
      10. 
  
  
  
  
    10. }; 
      11.

    从上面可以看到setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据

    二、更新类型

    在使用setState更新数据的时候，setState的更新类型分成：

    异步更新

    先举出一个例子：

     
 
 
 
      
  
  
  
  
    1. changeText() { 
      2. 
  
  
  
  
    2.   this.setState({ 
      3. 
  
  
  
  
    3.     message: "你好啊" 
      4. 
  
  
  
  
    4.   }) 
      5. 
  
  
  
  
    5.   console.log(this.state.message); // Hello World 
      6. 
  
  
  
  
    6. } 
      7.

    从上面可以看到，最终打印结果为Hello world，并不能在执行完setState之后立马拿到最新的state的结果

    如果想要立刻获取更新后的值，在第二个参数的回调中更新后会执行

     
 
 
 
      
  
  
  
  
    1. changeText() { 
      2. 
  
  
  
  
    2.   this.setState({ 
      3. 
  
  
  
  
    3.     message: "你好啊" 
      4. 
  
  
  
  
    4.   }, () => { 
      5. 
  
  
  
  
    5.     console.log(this.state.message); // 你好啊 
      6. 
  
  
  
  
    6.   }); 
      7. 
  
  
  
  
    7. } 
      8.

    同步更新

    同样先给出一个在setTimeout中更新的例子：

     
 
 
 
      
  
  
  
  
    1. changeText() { 
      2. 
  
  
  
  
    2.   setTimeout(() => { 
      3. 
  
  
  
  
    3.     this.setState({ 
      4. 
  
  
  
  
    4.       message: "你好啊 
      5. 
  
  
  
  
    5.     }); 
      6. 
  
  
  
  
    6.     console.log(this.state.message); // 你好啊 
      7. 
  
  
  
  
    7.   }, 0); 
      8. 
  
  
  
  
    8. } 
      9.

    上面的例子中，可以看到更新是同步

    再来举一个原生DOM事件的例子：

     
 
 
 
      
  
  
  
  
    1. componentDidMount() { 
      2. 
  
  
  
  
    2.   const btnEl = document.getElementById("btn"); 
      3. 
  
  
  
  
    3.   btnEl.addEventListener('click', () => { 
      4. 
  
  
  
  
    4.     this.setState({ 
      5. 
  
  
  
  
    5.       message: "你好啊" 
      6. 
  
  
  
  
    6.     }); 
      7. 
  
  
  
  
    7.     console.log(this.state.message); // 你好啊 
      8. 
  
  
  
  
    8.   }) 
      9. 
  
  
  
  
    9. } 
      10.

    小结

    在组件生命周期或React合成事件中，setState是异步

    在setTimeout或者原生dom事件中，setState是同步

    三、批量更新

    同样先给出一个例子：

     
 
 
 
      
  
  
  
  
    1. handleClick = () => { 
      2. 
  
  
  
  
    2.     this.setState({ 
      3. 
  
  
  
  
    3.         count: this.state.count + 1, 
      4. 
  
  
  
  
    4.     }) 
      5. 
  
  
  
  
    5.     console.log(this.state.count) // 1 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.     this.setState({ 
      8. 
  
  
  
  
    8.         count: this.state.count + 1, 
      9. 
  
  
  
  
    9.     }) 
      10. 
  
  
  
  
    10.     console.log(this.state.count) // 1 
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12.     this.setState({ 
      13. 
  
  
  
  
    13.         count: this.state.count + 1, 
      14. 
  
  
  
  
    14.     }) 
      15. 
  
  
  
  
    15.     console.log(this.state.count) // 1 
      16. 
  
  
  
  
    16. } 
      17.

    点击按钮触发事件，打印的都是 1，页面显示 count 的值为 2

    对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果

    上述的例子，实际等价于如下：

     
 
 
 
      
  
  
  
  
    1. Object.assign( 
      2. 
  
  
  
  
    2.   previousState, 
      3. 
  
  
  
  
    3.   {index: state.count+ 1}, 
      4. 
  
  
  
  
    4.   {index: state.count+ 1}, 
      5. 
  
  
  
  
    5.   ... 
      6. 
  
  
  
  
    6. ) 
      7.

    由于后面的数据会覆盖前面的更改，所以最终只加了一次

    如果是下一个state依赖前一个state的话，推荐给setState一个参数传入一个function，如下：

     
 
 
 
      
  
  
  
  
    1. onClick = () => { 
      2. 
  
  
  
  
    2.     this.setState((prevState, props) => { 
      3. 
  
  
  
  
    3.       return {count: prevState.count + 1}; 
      4. 
  
  
  
  
    4.     }); 
      5. 
  
  
  
  
    5.     this.setState((prevState, props) => { 
      6. 
  
  
  
  
    6.       return {count: prevState.count + 1}; 
      7. 
  
  
  
  
    7.     }); 
      8. 
  
  
  
  
    8. } 
      9.

    而在setTimeout或者原生dom事件中，由于是同步的操作，所以并不会进行覆盖现象

    参考文献

    https://juejin.cn/post/6844903667426918408

    https://juejin.cn/post/6844903636749778958

    https://segmentfault.com/a/1190000039077904

    名称栏目：面试官：说说React中的SetState执行机制
    标题路径：http://www.mswzjz.com/qtweb/news34/170934.html

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

    广告

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

    猜你还喜欢下面的内容

    标签优化知识

    同城分类信息

    成都广告公司　　 　app软件开发　　 　二枢服务器托管　　 　成都网站设计公司　　 　手机网站开发　　 　证企宝　　 　重庆教育培训网站建设　　 　成都微信小程序开发　　 　成都画册设计　　 　免备案虚拟主机　　 　成都网站建设　　 　微信服务号订阅号开发　　 　成都展柜设计　　 　内江做网站　　 　发光字制作　　 　攀枝花网站建设　　 　绵阳主机托管　　 　成都小谭网创广告　　 　西部信息机房　　 　成都保温材料