react 中 useState 中的 set 方法异步解决

使用 `useEffect` 监听状态的改变。

一、异步特性

在批量处理状态更新时,用以提高性能。

二、异步解决

使用`useEffect`来处理更新后的状态,`useEffect`钩子在组件渲染后执行,并且会在依赖项(第二个参数)发生变化时重新执行。可以利用这个特性来处理`useState`更新后的状态。

javascript 复制代码
import { useState, useEffect } from "react";

function MyComponent() {

  const [count, setCount] = useState(0);

  const handleClick = () => {

    setCount(count + 1);

    setCount(count + 2);

  };

  useEffect(() => {

    console.log("Count has been updated:", count);

  }, [count]);

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={handleClick}>Increment</button>

    </div>

  );

}
相关推荐
_山海1 分钟前
Bun入门指南
前端·javascript·后端
想睡懒觉7 分钟前
我用 CSS 3D 做了个星空隧道 Loading,没有 Three.js
前端
labixiong11 分钟前
transition 写在 CSS 变量上为什么不生效?给变量补张「类型身份证」
前端·css·html
YHL18 分钟前
🧠 Agent 记忆进阶:总结压缩与向量检索 —— 从截断到 Milvus 长期记忆
前端·人工智能
YHL20 分钟前
🎯 JavaScript 单例模式(Singleton Pattern)—— 从理论到实战
javascript·设计模式
用户9210802628628 分钟前
前端 Vue 专栏 05:从 Object.defineProperty 到 Proxy,彻底理解 Vue 响应式原理
前端
Fluxart.ai39 分钟前
GPT Image 2.5 有使用次数限制吗?额度、并发、频率限制说明
服务器·前端·gpt
程序员海军1 小时前
AI 越来越强,为什么打工人反而越来越累、越来越内耗了?
前端·程序员·aigc
vx_Biye_Design1 小时前
springboot游泳馆系统93765-计算机课程设计、毕业设计
java·javascript·spring boot·后端·python·spring·课程设计
晴天161 小时前
VSCodium 项目介绍
前端·javascript·vscode