快捷導(dǎo)航

React18?useState何時執(zhí)行更新及微任務(wù)理解

更新時間：2022年11月01日 15:14:00 作者：郎心似鐵

這篇文章主要為大家介紹了React18?useState何時執(zhí)行更新及微任務(wù)理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

函數(shù)式組件中的useState

前言：眾所周知useState是異步的,但網(wǎng)絡(luò)上對于useState何時異步更新并沒有一個共識，為了探究，做一個簡單的實驗，實驗?zāi)康氖翘骄縰seState與微任務(wù)、宏任務(wù)的先后關(guān)系

測試1

實驗步驟：點擊按鈕觸發(fā)事件，在事件中我們做三件事：修改state/定義一個宏任務(wù)setTimeout /定義一個微任務(wù)promise.then ，我們在微任務(wù)中打上debugger，暫停代碼，觀察此時頁面是否更新了數(shù)據(jù)。

實驗代碼

import React, { useState } from 'react'
export default function Test() {
    const [msg, setMsg] = useState('我是初始值')
    const onChange = () => {
        setMsg('我是更新值')
        setTimeout(() => {
            console.log('宏任務(wù)')
        }, 0);
        Promise.resolve().then(res=>{            
            debugger  
            console.log('微任務(wù)')         
        })
    }
    return (
        <div>
            <h2>{msg}</h2>
            <button onClick={onChange}>按鈕</button>
        </div>
    )
}

實驗期望：

如果頁面更新了，則說明在微任務(wù)之前，useState就已經(jīng)更新了狀態(tài)，并且頁面渲染完畢了
如果頁面未更新，則說明微任務(wù)在useState更新之前

實驗結(jié)果

結(jié)果分析結(jié)果符合第一種期望，useState在此微任務(wù)之前就完成了，由此得出useState異步更新是在微任務(wù)之前，同步代碼之后的結(jié)果，這是不準確的。讓我們進一步測試。

測試2

實驗步驟：測試2在廁所1上調(diào)整下順序。定義宏任務(wù)/定義微任務(wù)/修改state

實驗代碼：

import React, { useState } from 'react'
export default function Test() {
    const [msg, setMsg] = useState('我是初始值')
    const onChange = () => {
        setTimeout(() => {
            console.log('宏任務(wù)')
        }, 0);
        Promise.resolve().then(res=>{            
            debugger  
            console.log('微任務(wù)')         
        })
        setMsg('我是更新值')
    }
    return (
        <div>
            <h2>{msg}</h2>
            <button onClick={onChange}>按鈕</button>
        </div>
    )
}

實驗期望

如果頁面更新了，則說明在微任務(wù)之前，useState就已經(jīng)更新了狀態(tài)，并且頁面渲染完畢了
如果頁面未更新，則說明微任務(wù)在useState更新之前

實驗結(jié)果

結(jié)果分析

微任務(wù)已經(jīng)執(zhí)行了，但是頁面還未更新，說明useState并不一定是在微任務(wù)之前執(zhí)行。具體的執(zhí)行結(jié)果與代碼定義順序有關(guān)。

類組件中的setState

setState在promise之前定義

export default class Test extends React.Component {
    state = {
        msg: '我是初始值'
    }
    handleClick = ()=>{
        setTimeout(() => {
           console.log('宏任務(wù)') 
        }, 0);
        this.setState({
            msg: '我是更新值'
        },()=>{
            console.log('更新了msg:', this.state.msg)
        })
        Promise.resolve().then(() => {
            console.log('微任務(wù)觸發(fā)msg:', this.state.msg)
        })
    }
  render() {
    return (
      <div>
            <h2>{this.state.msg}</h2>
        <button onClick={this.handleClick}>按鈕</button>
      </div>
    )
  }
}

執(zhí)行結(jié)果：

結(jié)果說明：當先調(diào)用setState，后定義promise時，setState會在微任務(wù)之前更新狀態(tài)。

setState在promise之后定義

export default class Test extends React.Component {
    state = {
        msg: '我是初始值'
    }
    handleClick = ()=>{
        setTimeout(() => {
           console.log('宏任務(wù)') 
        }, 0);
        Promise.resolve().then(() => {
            console.log('微任務(wù)觸發(fā)msg:', this.state.msg)
        })
        this.setState({
            msg: '我是更新值'
        }, () => {
            console.log('更新了msg:', this.state.msg)
        })
    }
  render() {
    return (
      <div>
            <h2>{this.state.msg}</h2>
        <button onClick={this.handleClick}>按鈕</button>
      </div>
    )
  }
}

實驗結(jié)果：