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>

  );

}
相关推荐
lichenyang4538 分钟前
聊天消息的「状态」该怎么存?从一堆 boolean 到一个状态机
前端
gz-郭小敏14 分钟前
优化横向滚动展示大量数据的时候数据晃动问题
前端·javascript·html·css3
ClouGence16 分钟前
自动化测试 CueCast 新版本发布:录制更稳、回放更准、排障更清晰
前端·程序员·测试
骑士雄师21 分钟前
19.3 langgraph的工作节点和路由函数
java·前端·数据库
小小小小宇29 分钟前
TypeScript类型体操
前端
喜欢踢足球的老罗1 小时前
一张跨域图的“四次换乘“:blob URL 与 Chrome 扩展架构里的工程艺术
前端·chrome·架构
程序员黑豆1 小时前
AI全栈开发 - Java:基本数据类型 vs 引用数据类型的内存存储
java·前端·ai编程
FserSuN1 小时前
Chrome CORS / PNA / LNA 问题排查与解决方案
前端·chrome
小小小小宇1 小时前
Claude Code 自动运行方法大全
前端