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>

  );

}
相关推荐
空中海44 分钟前
第七章:vue工程化与构建工具
前端·javascript·vue.js
zhensherlock1 小时前
Protocol Launcher 系列:Trello 看板管理的协议自动化
前端·javascript·typescript·node.js·自动化·github·js
zhuà!1 小时前
element的el-form提交校验没反应问题
前端·elementui
龙猫里的小梅啊1 小时前
CSS(一)CSS基础语法与样式引入
前端·css
小码哥_常1 小时前
从0到1,开启Android音视频开发之旅
前端
渔舟小调1 小时前
P19 | 前端加密通信层 pikachuNetwork.js 完整实现
开发语言·前端·javascript
qq_12084093712 小时前
Three.js 工程向:Draw Call 预算治理与渲染批处理实践
前端·javascript
不会聊天真君6475 小时前
JavaScript基础语法(Web前端开发笔记第三期)
前端·javascript·笔记
齐鲁大虾5 小时前
新人编程语言选择指南
javascript·c++·python·c#