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>

  );

}
相关推荐
摘星编程1 分钟前
React Native鸿蒙版:自定义useMask输入掩码
react native·react.js·harmonyos
摘星编程24 分钟前
OpenHarmony + RN:自定义useValidator表单验证
react native·react.js·harmonyos
ziqi52231 分钟前
第二十五天笔记
前端·chrome·笔记
GISer_Jing36 分钟前
Memory、Rules、Skills、MCP如何重塑AI编程
前端·人工智能·aigc·ai编程
xcs1940537 分钟前
前端 项目构建问题 \node_modules\loader-runner\lib\loadLoader.js
开发语言·前端·javascript
广然38 分钟前
EVE-NG 镜像管理工具 1.1 Web 版本正式发布!
运维·服务器·前端
Data_Journal1 小时前
【无标题】
大数据·服务器·前端·数据库·人工智能
我爱加班、、1 小时前
new Map()+Array.from()整理elementPlus的级联器数据
linux·前端·javascript
Hx_Ma161 小时前
Map集合的5种遍历方式
java·前端·javascript
css趣多多1 小时前
render函数
前端·javascript·vue.js