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" 前输出。
相关推荐
喧星Aries5 分钟前
进程调度的时机,切换与过程方式(操作系统OS)
java·服务器·前端·操作系统·进程调度
海底火旺6 分钟前
useState:批处理与函数式更新
前端·react.js·面试
一块plus7 分钟前
一门原本只是“试试水”的课程,没想到炸出了一群真诚的开发者
javascript·面试·github
亿万托福9 分钟前
数字世界的构筑之艺:前端技术栈的浅描与远瞻
前端
用户40812812003819 分钟前
JWT 和 token 区别
前端
yvvvy10 分钟前
🚀React + Vite 实战:打造智能单词学习应用
javascript
盏茶作酒2910 分钟前
打造自己的组件库(三)打包及发布
前端·vue.js
单休好_好就好在比双休少一天11 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪11 分钟前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
归于尽11 分钟前
从 TodoList 看自定义 Hook 的设计思想
前端