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>

  );

}
相关推荐
全马必破三14 小时前
Webpack知识点汇总
前端·webpack·node.js
NEXT0614 小时前
CommonJS 与 ES Modules的区别
前端·面试·node.js
TechFind14 小时前
如何为 AI Agent 写出完美的 SOUL.md 人格文件(2026指南)
javascript
猪头男15 小时前
【从零开始学习Vue|第八篇】深入组件——组件事件
前端
薛一半15 小时前
React三大属性之refs
前端·javascript·react.js
Lao乾妈官方认证唯一女友:D15 小时前
Ethers.js使用方法
javascript·web3
程序员林北北15 小时前
【前端进阶之旅】Svelte:编译即框架,让前端开发回归简洁
前端·javascript·vue.js·react.js·html5
yy.y--16 小时前
Java线程实现浏览器实时时钟
java·linux·开发语言·前端·python
echoVic16 小时前
给 Agent Skill 装上「黑匣子」:STOP 可观测性协议设计与实现
java·javascript
Dontla16 小时前
Python Streamlit介绍(开源Python Web应用框架,快速将Python脚本转换成交互式Web应用,适合数据科学和机器学习项目快速展示)
前端·python·开源