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执行更新的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了关于react中的常见错误及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
react开发中如何使用require.ensure加载es6风格的组件
本篇文章主要介绍了react开发中如何使用require.ensure加载es6风格的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
对于刚学前端的大家来说,对于React中的事件监听写法有所疑问很正常，特别是React中箭头函数使用这块，下面这篇文章主要给大家深入的讲解了关于React中何时使用箭头函数的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2017-08-08
最近在学习React，学习到了列表渲染这一块，发现网上这方面的资料较少，所以自己来总结下，下面这篇文章主要给大家介绍了关于React学习笔记之列表渲染的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
这篇文章主要介绍了React less 实现纵横柱状图示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
react中hooks使用useState的更新不触发dom更新问题及解决
这篇文章主要介绍了react中hooks使用useState的更新不触发dom更新问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
本篇文章主要介绍了React应用中使用Bootstrap的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
新建的React Native就遇到vscode报警解除方法
这篇文章主要为大家介绍了新建的React Native就遇到vscode报警解除方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
大家好，我卡颂。虽然React官网用大量篇幅介绍最佳实践，但因JSX语法的灵活性，所以总是会出现奇奇怪怪的React写法。本文介绍2种奇怪（但在某些场景下有意义）的React写法。也欢迎大家在评论区讨论你遇到过的奇怪写法2023-03-03
这篇文章主要给大家介绍了关于React Native中Mobx的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
最新评论