React18 useState何时及如何执行更新，微任务机制又是如何影响这一过程的？

本文共计1016个文字，预计阅读时间需要5分钟。

目录+函数式组件中的useState+测试1+测试2+类组件中的setState+setState在promise之前定义+setState在promise之后定义+结论+函数式组件中的useState+前言：众所周知，useState是异步的，但网上对useS的描述为异步的。

目录

• 函数式组件中的useState
• 测试1
• 测试2
• 类组件中的setState
• setState在promise之前定义
• setState在promise之后定义
• 结论

函数式组件中的useState

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

测试1

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