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>

  );

}
相关推荐
小赵同学WoW15 分钟前
1-2 TypeScript 中的 `any` 与 `unknown`
前端
six_27 分钟前
C# 上位机(持续更新中)
前端·面试·c#
风雨_27 分钟前
Git Worktree sourcetree完整使用指南
前端
半个落月40 分钟前
React 组件通信进阶:useContext 与自定义 Hook 实战详解
前端·react.js
MgArcher1 小时前
抖音a_bogus参数逆向实战:JSVMP环境模拟与Hook技术(2025最新)
javascript·爬虫·python
用户921080262861 小时前
ChatComposer 输入区改造:基于技能市场实现 Agent 输入框
前端
用户45989204565161 小时前
一套 KMP 多仓库版本治理工作流:用 Version Catalog + CI 把发版流水线自动化
前端·kotlin
小赵同学WoW1 小时前
1-4 TypeScript 中的 `number`、`bigint` 与 `string`
前端
小赵同学WoW1 小时前
1-3 `boolean` 与字面量类型
前端
光影少年1 小时前
react navite 长列表优化:FlatList / SectionList 原理与优化属性
前端·react native·react.js