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>

  );

}
相关推荐
一月是个猫几秒前
Electron入门指南:从零开始构建跨平台桌面应用
前端·electron
时72 分钟前
前端项目测试覆盖率检测
前端·jest
哈哈O哈哈哈7 分钟前
📚 最新版 SCSS(Sass)完整教程(2026 年版)
前端
哒哒哒5285207 分钟前
为什么用 useReducer 而不用 useState?
前端
OEC小胖胖38 分钟前
02|从 `createRoot` 到 `scheduleUpdateOnFiber`:一次更新如何进入 React 引擎
前端·javascript·react.js·前端框架
林太白1 小时前
ofd文件
前端·后端
闲云一鹤1 小时前
Git 焚决!一个绝招助你找回丢失的代码文件!
前端·git
小宇的天下1 小时前
Calibre 3Dstack--每日一个命令day 6 [process和export layout](3-6)
java·前端·数据库
冴羽1 小时前
2025 年最火的前端项目出炉,No.1 易主!
前端·javascript·node.js
wordbaby1 小时前
Flexbox 布局中的滚动失效问题:为什么需要 `min-h-0`?
前端·css