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>

  );

}
相关推荐
J2虾虾6 分钟前
Vite前端项目构建
前端
Wect9 分钟前
LeetCode 106. 从中序与后序遍历序列构造二叉树:题解+思路拆解
前端·算法·typescript
yuki_uix10 分钟前
当系统"没了头"(headless),AI 反而更好接手了?
前端
滕青山10 分钟前
JSON转TypeScript接口核心JS实现
前端·javascript·vue.js
专注VB编程开发20年14 分钟前
C#,VB.NET多台电脑读取REDIS服务器,如何保证数据不会冲突
前端·redis·bootstrap·html
凯里欧文42719 分钟前
🔥真正高级的前端,早就用这 10 个 CSS 特性干掉 80% 冗余代码
前端·css
Xin_z_36 分钟前
Vue3 + Element Plus el-tree 节点点击选中问题修复总结
前端·javascript·vue.js
linux_cfan41 分钟前
从“线性观看”到“语义检索”:企业级视频知识库播放器选型指南 (2026版)
javascript·学习·音视频·html5
dust_and_stars1 小时前
Ubuntu 24.04 安装配置 vscode-server
前端·ubuntu·eureka
Never_Satisfied1 小时前
在HTML & CSS中,letter-spacing详解
前端·css·html