React18 useState何时执行更新及微任务理解

更新时间：2022年11月01日 15:14:00 作者：郎心似铁

这篇文章主要为大家介绍了React18 useState何时执行更新及微任务理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

函数式组件中的useState

前言：众所周知useState是异步的,但网络上对于useState何时异步更新并没有一个共识，为了探究，做一个简单的实验，实验目的是探究useState与微任务、宏任务的先后关系

测试1

实验步骤：点击按钮触发事件，在事件中我们做三件事：修改state/定义一个宏任务setTimeout /定义一个微任务promise.then ，我们在微任务中打上debugger，暂停代码，观察此时页面是否更新了数据。

实验代码

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

实验期望：

如果页面更新了，则说明在微任务之前，useState就已经更新了状态，并且页面渲染完毕了
如果页面未更新，则说明微任务在useState更新之前

实验结果

结果分析结果符合第一种期望，useState在此微任务之前就完成了，由此得出useState异步更新是在微任务之前，同步代码之后的结果，这是不准确的。让我们进一步测试。

测试2

实验步骤：测试2在厕所1上调整下顺序。定义宏任务/定义微任务/修改state

实验代码：

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

实验期望

如果页面更新了，则说明在微任务之前，useState就已经更新了状态，并且页面渲染完毕了
如果页面未更新，则说明微任务在useState更新之前

实验结果

结果分析

微任务已经执行了，但是页面还未更新，说明useState并不一定是在微任务之前执行。具体的执行结果与代码定义顺序有关。

类组件中的setState

setState在promise之前定义

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

执行结果：

结果说明：当先调用setState，后定义promise时，setState会在微任务之前更新状态。

setState在promise之后定义

export default class Test extends React.Component {
    state = {
        msg: '我是初始值'
    }
    handleClick = ()=>{
        setTimeout(() => {
           console.log('宏任务') 
        }, 0);
        Promise.resolve().then(() => {
            console.log('微任务触发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>
    )
  }
}

实验结果：

结果说明：当先定义promise，后调用setState时，setState会在微任务之后更新状态。

结论

useState/setState的异步并不是一种在同步之后，微任务之前的特殊情况，而是一种和微任务相同的机制，看见简单理解为微任务，因为它的更新时机与微任务的调用相同，但react是不是用微任务来实现的更新，我不能确定。

以上就是React18 useState何时执行更新及微任务理解的详细内容，更多关于React18 useState执行更新的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

ReactNative 状态管理redux使用详解
这篇文章主要介绍了ReactNative 状态管理redux使用详解
2023-03-03
React useEffect异步操作常见问题小结
本文主要介绍了React useEffect异步操作常见问题小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
react配置代理setupProxy.js无法访问v3.0版本问题
这篇文章主要介绍了react配置代理setupProxy.js无法访问v3.0版本问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
基于React实现搜索GitHub用户功能
在本篇博客中,我们将介绍如何在 React 应用中搜索 GitHub 用户并显示他们的信息,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-02-02
React-Native中禁用Navigator手势返回的示例代码
本篇文章主要介绍了React-Native中禁用Navigator手势返回的示例代码，具有一定的参考价值，有兴趣的可以了解一下
2017-09-09
使用Jenkins部署React项目的方法步骤
这篇文章主要介绍了使用Jenkins部署React项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
VSCode搭建React Native环境
这篇文章主要介绍了VSCode搭建React Native环境，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
react-native DatePicker日期选择组件的实现代码
本篇文章主要介绍了react-native DatePicker日期选择组件的实现代码，具有一定的参考价值，有兴趣的可以了解下
2017-09-09
react实现每隔60s刷新一次接口的示例代码
本文主要介绍了react实现每隔60s刷新一次接口的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
浅谈react前后端同构渲染
本篇文章主要介绍了浅谈react前后端同构渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09