react|useState的异步渲染

useState

  • 组件里面的变量可以用state来表示,setState函数是用来更新state的值的
  • 用法
javascript 复制代码
let [age,setAge]=useState(0); // 0是变量age的初始值

异步渲染

  • setState是异步指定的。也就是setAge是异步执行的。
  • 执行但不是立刻渲染,而是进入到微任务队列。注意分清执行和渲染是两回事。
javascript 复制代码
function App() {
    let [age, setAge] = useState(0);
    useEffect(()=>{
        console.log("use effect:", age);
    })
    let addAge = () => {
        setTimeout(()=>{
            console.log("i am macro task");
        },)
        Promise.resolve().then(()=>{
            console.log("i am micro task ");
        })
        setAge(()=>{
            console.log("where am i ");
            return 10;
        });
        console.log("main task");
    };
    return (
        <div>
            i am {age} years old
            <button onClick={addAge}>add </button>
        </div>

    );
}

export default App;

分析代码和输出

点击按钮,触发addAge函数。

  • setTimout进入宏任务队列,then进入微任务队列,setAge异步执行,返回10,也就是告诉react,下次把age渲染成10,所以如果在console.log("main task")上加一行,console.log(age),输出的还是10。
  • 从useEffect的输出顺序来看,大胆猜测react的渲染事件就是进入的微任务队列。因为,use effect:10 在"macro task" 前输出。
相关推荐
aiprtem18 分钟前
基于Flutter的web登录设计
前端·flutter
浪裡遊21 分钟前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术28 分钟前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing33 分钟前
0704-0706上海,又聚上了
前端·新浪微博
止观止1 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall1 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴1 小时前
简单入门Python装饰器
前端·python
袁煦丞2 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码2 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
Liudef062 小时前
2048小游戏实现
javascript·css·css3