日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
面試官：說(shuō)說(shuō)React中的SetState執(zhí)行機(jī)制

本文轉(zhuǎn)載自微信公眾號(hào)「JS每日一題」，作者灰灰 。轉(zhuǎn)載本文請(qǐng)聯(lián)系JS每日一題公眾號(hào)。

創(chuàng)新互聯(lián)專(zhuān)注于黃平企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),成都做商城網(wǎng)站。黃平網(wǎng)站建設(shè)公司,為黃平等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站建設(shè)，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

一、是什么

一個(gè)組件的顯示形態(tài)可以由數(shù)據(jù)狀態(tài)和外部參數(shù)所決定，而數(shù)據(jù)狀態(tài)就是state

當(dāng)需要修改里面的值的狀態(tài)需要通過(guò)調(diào)用setState來(lái)改變，從而達(dá)到更新組件內(nèi)部數(shù)據(jù)的作用

如下例子：

 
 
 
 
    
  
  
  
  
  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每日一題" 
  •         }) 
  •     } 
  • } 

    • 通過(guò)點(diǎn)擊按鈕觸發(fā)onclick事件，執(zhí)行this.setState方法更新state狀態(tài)，然后重新執(zhí)行render函數(shù)，從而導(dǎo)致頁(yè)面的視圖更新

    如果直接修改state的狀態(tài)，如下：

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

    我們會(huì)發(fā)現(xiàn)頁(yè)面并不會(huì)有任何反應(yīng)，但是state的狀態(tài)是已經(jīng)發(fā)生了改變

    這是因?yàn)镽eact并不像vue2中調(diào)用Object.defineProperty數(shù)據(jù)響應(yīng)式或者Vue3調(diào)用Proxy監(jiān)聽(tīng)數(shù)據(jù)的變化

    必須通過(guò)setState方法來(lái)告知react組件state已經(jīng)發(fā)生了改變

    關(guān)于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第一個(gè)參數(shù)可以是一個(gè)對(duì)象，或者是一個(gè)函數(shù)，而第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，用于可以實(shí)時(shí)的獲取到更新之后的數(shù)據(jù)

    二、更新類(lèi)型

    在使用setState更新數(shù)據(jù)的時(shí)候，setState的更新類(lèi)型分成：

    • 異步更新
    • 同步更新

    異步更新

    先舉出一個(gè)例子：

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

    從上面可以看到，最終打印結(jié)果為Hello world，并不能在執(zhí)行完setState之后立馬拿到最新的state的結(jié)果

    如果想要立刻獲取更新后的值，在第二個(gè)參數(shù)的回調(diào)中更新后會(huì)執(zhí)行

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

    同步更新

    同樣先給出一個(gè)在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.

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

    再來(lái)舉一個(gè)原生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.

    小結(jié)

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

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

    三、批量更新

    同樣先給出一個(gè)例子：

     
 
 
 
      
  
  
  
  
    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.

    點(diǎn)擊按鈕觸發(fā)事件，打印的都是 1，頁(yè)面顯示 count 的值為 2

    對(duì)同一個(gè)值進(jìn)行多次 setState， setState 的批量更新策略會(huì)對(duì)其進(jìn)行覆蓋，取最后一次的執(zhí)行結(jié)果

    上述的例子，實(shí)際等價(jià)于如下：

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

    由于后面的數(shù)據(jù)會(huì)覆蓋前面的更改，所以最終只加了一次

    如果是下一個(gè)state依賴(lài)前一個(gè)state的話，推薦給setState一個(gè)參數(shù)傳入一個(gè)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事件中，由于是同步的操作，所以并不會(huì)進(jìn)行覆蓋現(xiàn)象

    參考文獻(xiàn)

    https://juejin.cn/post/6844903667426918408

    https://juejin.cn/post/6844903636749778958

    https://segmentfault.com/a/1190000039077904


    本文標(biāo)題：面試官：說(shuō)說(shuō)React中的SetState執(zhí)行機(jī)制
    分享URL：http://www.5511xx.com/article/djcpcjp.html