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>

  );

}
相关推荐
渣波几秒前
React 性能优化实战:从 memo 到 Hooks 的底层原理与进阶封装
前端·javascript
触底反弹几秒前
别再 Prop Drilling 了!一文彻底搞懂 React 组件通信的 5 种方案
前端·javascript·react.js
玉宇夕落1 分钟前
受控与非受控组件以及一些表单的简单业务逻辑的理解
前端
两只羊ovo1 分钟前
listToTree 速通:一维数组怎么变出多级菜单?Map 和 reduce 两种全解
前端·javascript
何时梦醒3 分钟前
React 进阶必修:彻底搞懂受控组件与非受控组件
前端·javascript·react.js
无糖可可果6 分钟前
React 性能优化利器:深入理解 `useCallback`、`useMemo` 与 `React.memo`
前端
今日无bug9 分钟前
JS 同步与异步:从单线程到 Promise
javascript·promise
Yoram9 分钟前
JavaScript 错误处理的一种整理与实践
前端
你听得到1113 分钟前
排查 App 问题:别只盯着报错,把前后发生的事情串起来
android·前端·flutter
lllsure26 分钟前
Vue&React Router
前端·vue.js·react.js