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>

  );

}
相关推荐
风骏时光牛马13 小时前
疑难Bug根因定位与问题复盘分析
前端
创新技术阁14 小时前
FastapiAdmin 系统日志体系与核心配置参数详解
前端·后端·fastapi
掘金酱14 小时前
【社区公告】签到与矿石奖励解耦说明
前端
promiseThen14 小时前
LWC Workflow:用 7 个 Cursor Skill 搭一条 AI 协作开发流水线
前端·ai编程
一个游离的指针15 小时前
函数管道:消除深度嵌套调用
前端·javascript
浅诺15 小时前
Nginx sub_filter 的“幽灵陷阱”:为什么页面能打开,懒加载的 JS 却全是 404?
前端
PBitW15 小时前
为什么vite中TS报错,可以继续运行?Webpack不行?
前端·webpack·typescript·vite
光影少年15 小时前
react navite手写 FlatList 优化配置
前端·react native·react.js
曹牧15 小时前
C#:文本文件读取
服务器·前端·c#
柚yuzumi15 小时前
前端优化,从少触发一次开始:防抖与节流
前端·javascript