当前位置: 首页 > news >正文

react hook 获取setState的新值

  1. 利用useRef 存储最新值
 	let [count,setCount] = useState(0)let countRef = useRef(count)let handleClick = function (){setCount((prev)=>{countRef.current = prev+1return countRef.current})console.info(countRef.current)}
  1. 利用useRef
	let [count,setCount] = useState(0)let countRef = useRef(count)countRef.current = countlet handleClick = function (){setCount((prev)=>{return prev+1})setTimeout(()=>{console.info(countRef.current)})}
  1. 封装一个自定义函数
//useSyncCallback.js
import {useEffect,useState,useCallback} from 'react'
export default function useSyncCallback(callback){const [proxyState, setProxyState] = useState({ current: false });const Func = useCallback(() => {setProxyState({ current: true });}, [proxyState])useEffect(() => {if (proxyState.current === true) setProxyState({ current: false });}, [proxyState]);useEffect(() => {proxyState.current && callback();});return Func
};

使用方法:

import React,{useState,useCallback,useRef} from 'react'
import {Button,Input} from 'antd'
import HighFrequency from '../../utils/HighFrequency';
import useSyncCallback from '../../utils/useSyncCallback'export default function HookOptimization() {let [name,setName]=useState('_')let handleChange = HighFrequency.debounce(function(e){setName(()=>{return e.target.value})fnc()})const fnc = useSyncCallback(() => {console.log(name)})return (<div><Input onChange={handleChange}/></div>)}
http://www.lryc.cn/news/235126.html

相关文章:

  • JVM判断对象是否存活之引用计数法、可达性分析
  • 报道 | 2023年12月-2024年2月国际运筹优化会议汇总
  • 【科技素养】蓝桥杯STEMA 科技素养组模拟练习试卷C
  • “升级图片管理,优化工作流程——轻松将JPG转为PNG“
  • 基于Springboot的地方美食分享网站(有报告)。Javaee项目,springboot项目。
  • 助力水泥基建裂痕自动化巡检,基于yolov5融合ASPP开发构建多尺度融合目标检测识别系统
  • rk3588使用vscode远程debug 配置文件
  • 隐私协议 Secret Network 宣布使用 Octopus Network 构建的 NEAR-IBC 连接 NEAR 生态
  • Milvus Standalone安装
  • 二分查找算法合集
  • SELinux零知识学习十八、SELinux策略语言之类型强制(3)
  • 人工智能引领环境保护的新浪潮:技术应用及其影响
  • 第三十四节——组合式API使用路由
  • 文件隐藏 [极客大挑战 2019]Secret File1
  • Linux CentOS 8(MariaDB的数据类型)
  • 云端援手:智能枢纽应对数字资产挑战 ——华为云11.11应用集成管理与创新专区优惠限时购
  • Azure的AI使用-(语言检测、图像分析、图像文本识别)
  • QDateEdit开发详解
  • 3.6 Windows驱动开发:内核进程汇编与反汇编
  • zsh和ohmyzsh安装指南+插件推荐
  • VS中修改解决方案名称和项目名称
  • iOS UITableView获取到的contentSize不正确
  • C++二分查找算法:查找和最小的 K 对数字
  • 开源WIFI继电器之方案介绍
  • html使用天地图写一个地图列表
  • C++ Qt 学习(九):模型视图代理
  • wpf devexpress 自定义统计
  • 【Flink】Flink任务缺失Jobmanager日志的问题排查
  • 教程:使用 Keras 优化神经网络
  • 什么是PWA(Progressive Web App)?它有哪些特点和优势?