react hooks遇到setTimeout

在JavaScript中,setTimeout函数是异步执行的,它会在事件循环的下一个循环中执行。因此,即使通过箭头函数将当前状态值传递给setTimeout的回调函数,该回调函数仍然会在当前状态值更新之前执行。

为了避免状态获取到旧值的问题,您可以使用useRef来存储最新的状态值,并在定时器回调函数中引用它。下面是一个示例:

[外链图片转存中…(img-BixVDsln-1705475499010)]

在上述示例中,我们使用了useRef钩子来创建了一个名为latestValueRef的引用对象,并将其初始值设为状态值。每当状态值发生变化时,我们更新latestValueRef的值。然后,在定时器回调函数中,我们通过latestValueRef.current获取到最新的状态值。

这样,无论setTimeout回调函数何时执行,它都可以获取到最新的状态值,避免了获取到旧值的问题

当然,还有一个更适合hooks宝宝体质的写法: 常见的,当我们需要一个setInterval定时器去执行相关操作时,可以利用监听state的变化来避免取到旧值的问题

[外链图片转存中…(img-brSTRR5y-1705475499012)]

如上,我们巧妙地使countHandle每次加1,而后监听其变化执行todo()函数,todo()内取用任何state状态都能取到最新值。

类似的,js原生监听事件(addEventListener)也会遇到一样的问题,当我们使用非react编写的第三方库时,或许会遇到这类问题。比如当我们需要监听window上的某些事件时,我们可以封装一个hooks来优雅地解决这个问题:

const useWindowEvent = <K extends keyof WindowEventMap>(eventName: K, callback: (e: WindowEventMap[K]) => void) => {const [eventHandle, setEventHandle] = useState<WindowEventMap[K]>();useEffect(() => {window.addEventListener(eventName, (e) => {setEventHandle(e);});}, []);useEffect(() => {if (eventHandle) {callback(eventHandle);}}, [eventHandle]);
};useWindowEvent('mousemove', ({ clientX, clientY }) => {onMouseMove(clientX, clientY);
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/641011.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习(5)---自注意力机制

文章目录 1. 输入与输出2. Self-attention2.1 介绍2.2 运作过程2.3 矩阵相乘理解运作过程 3. 位置编码4. Truncated Self-attention4.1 概述4.2 和CNN对比4.3 和RNN对比 1. 输入与输出 1. 一般情况下在简单模型中我们输入一个向量&#xff0c;输出结果可能是一个数值或者一个类…

【一站解决您的问题】mac 利用命令升级nodejs、npm、安装Nodejs的多版本管理器n、nodejs下载地址

一&#xff1a;下载nodejs 官网地址&#xff0c;点击下载稳定版 https://nodejs.org/en 如果官网下载特别慢&#xff0c;可以点击这个地址下载 点击这里 https://nodejs.cn/download/current/ 安装完成后&#xff0c;就包含了nodejs 和 npm。此时您的版本就是下载安装的版本…

域名与IP地址之间的关系?

域名和IP相辅相成&#xff0c;两者结合使用户可以简单、轻松地访问Internet。不过对于初涉互联网的新手站长很可能误以为域名就是 IP地址&#xff0c;甚至将独立IP理解成只能够自己访问。 么&#xff0c;域名和IP地址究竟是怎么定义的&#xff0c;它们之间又有哪些关系呢&#…

flume自定义拦截器

要自定义 Flume 拦截器&#xff0c;你需要编写一个实现 org.apache.flume.interceptor.Interceptor 接口的自定义拦截器类。以下是一个简单的示例&#xff1a; import org.apache.flume.Context; import org.apache.flume.Event; import org.apache.flume.interceptor.Interce…

数字频率合成器dds的量化性能分析matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 DDS的基本原理 4.2 DDS的量化性能分析 5.完整工程文件 1.课题概述 数字频率合成器dds的量化性能分析matlab仿真&#xff0c;分别定义累加器位宽&#xff0c;截位位宽&#xff0c;模拟DAC位宽等&…

第11章-第1节-SQL语句(基于mysql社区版8.0.36.0)

1、先看看以前写过的几篇数据库基础文章&#xff1a; 基础SQL语句整理(mysql5.7下通过运行) 进阶SQL语句整理(mysql5.7下通过运行) 高级SQL语句整理(mysql5.7下通过运行) 2、SQL的基础应用感觉没有太多可以讲的东西&#xff0c;直接上学习笔记&#xff0c;可以看的很直接&a…

制冷系统吸排气管路的设计

吸气管路的设计 由于流动产生的阻力损失,导致压缩机吸气口处的压力低于蒸发器出口处的压力。当吸气压力降低时&#xff0c;回气比容增大&#xff0c;压缩机的排气量减少&#xff0c;机组制冷量将会有损失。同时吸气管中还要维持足够高的制冷剂流速以使冷冻油能顺利返回压缩机。…

走出大模型部署新手村!小明这样用魔搭×函数计算

作者&#xff1a;拓山 前文介绍了魔搭 ModelScope 社区模型服务 SwingDeploy 服务。开发者可以将模型从魔搭社区的模型库一键部署至阿里云函数计算&#xff0c;当选择模型并部署时&#xff0c;系统会选择对应的机器配置。按需使用可以在根据工作负载动态的减少资源&#xff0c…

如何在WordPress网站中添加多语言搜索(2种简单方法)

您想在WordPress网站中添加多语言搜索吗&#xff1f; 如果您有一个多语言 WordPress 网站&#xff0c;那么添加多语言搜索功能可以帮助用户通过使用自己的语言进行搜索来更快地找到信息。 在本文中&#xff0c;我们将向您展示如何在 WordPress 中轻松添加多语言搜索&#xff…

C#,入门教程(31)——预处理指令的基础知识与使用方法

上一篇&#xff1a; C#&#xff0c;入门教程(30)——扎好程序的笼子&#xff0c;错误处理 try catchhttps://blog.csdn.net/beijinghorn/article/details/124182386 Visual Studio、C#编译器以及C#语法所支持的预处理指令&#xff0c;绝对是天才设计。 编译程序的时候会发现&am…

EasyRecovery2024易恢复专业免费可靠的国产数据恢复软件

EasyRecovery TM &#xff08;易恢复中国&#xff09;是由全球著名数据厂商Ontrack 出品的一款数据文件恢复软件。支持恢复不同存储介质数据&#xff1a;硬盘、光盘、U盘/移动硬盘、数码相机、Raid文件恢复等&#xff0c;能恢复包括文档、表格、图片、音视频等各种文件。 Easy…

Docker Ipvlan l3s模式说明

看到Docker Ipvlan中有三种模式L2、L3、L3S模式&#xff0c;查阅了L3S&#xff0c;记录如下&#xff1a; 起因 Docker链接: IPvlan network driver 概念 注释说明&#xff08;摘选自: ipvlan-l3s模式&#xff09; L3S mode与L3 mode 的区别在于启用了iptables (conn-track…

服务优雅下线

服务优雅下线 问题背景描述 运维同事反馈上线滚动发布&#xff0c;旧实例接收的请求发生业务中断&#xff0c;没有处理完成&#xff0c; 为保证服务质量&#xff0c;期望发布时旧实例将已有请求处理完成再回收。先说可能会带来的影响&#xff1a;业务处理中断 导致数据不完整…

开源项目CuteSqlite开发笔记(八):Windows 64位/32位使用GetWindowLongPtr钩子函数

需求描述 在开发CuteSqlite的时候&#xff0c; 有一个功能需要实现&#xff0c;鼠标移到WTL::CStatic上后&#xff0c;发送消息通知CToolTipCtrl弹出。 遇到问题 WTL::CStatic控件没有相应 WM_MOUSEMOVE 消息&#xff0c;需要返回一个HTCLIENT消息来让窗口处理函数执行 WM_MO…

【QT+QGIS跨平台编译】之六:【LZMA+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文章目录 一、lzma介绍二、文件下载三、文件分析四、pro文件五、编译实践一、lzma介绍 LZMA(Lempel-Ziv-Markov chain-Algorithm的缩写),是一个Deflate和LZ77算法改良和优化后的压缩算法。 libLzma是基于LZMA压缩算法封装的开源库。2001年被首次应用于7-Zip压缩工具中,是 …

点亮流水灯

目录 1.water_led 2.tb_water_led 50MHZ一个周期是20ns,0.5秒就是20ns0.02um0.00002ms0.000_00002s。0.5/0.000_00002s25_000_000个时钟周期&#xff0c;表示要从0计数到24_999_999 LED灯是低电平点亮&#xff0c;前0.5秒点亮第一个LED灯&#xff0c;当检测到脉冲信号点亮第二…

关于缓存 db redis local 取舍之道

文章目录 前言一、影响因素二、db or redis or local1.db2.redis3. local 三、redisson 和 CaffeineCache 封装3.1 redisson3.1.1 maven3.1.2 封装3.1.3 使用 3.2 CaffeineCache3.1.1 maven3.1.2 封装3.1.3 使用 总结 前言 让我们来聊一下数据缓存&#xff0c;它是如何为我们带…

【C/C++】C/C++编程——为什么学习 C++?

当提到C的时候&#xff0c;很多人会觉得语法复杂、学习曲线陡峭&#xff0c;并且好像与C语言还有点"纠缠不清"。尽管如此&#xff0c;C仍然是当今世界上最受欢迎和最有影响力的编程语言之一。特别是在当今快速发展的人工智能&#xff08;AI&#xff09;领域&#xff…

【Java 设计模式】行为型之命令模式

文章目录 1. 定义2. 应用场景3. 代码实现结语 命令模式&#xff08;Command Pattern&#xff09;是一种行为型设计模式&#xff0c;用于将请求封装为对象&#xff0c;使得可以参数化客户端对象&#xff0c;并且能够排队、记录请求&#xff0c;以及支持撤销操作。在本文中&#…

R基础语法

1.变量 命名规则&#xff1a; R语言中变量可以由字母&#xff0c;数字以及点号.或下划线_组成。以字母或点开头。不能以数字开头。一些特殊的符号不能在名称中出现&#xff0c;如%&#xff0c;$等。区分大小写&#xff0c;如name和Name是两个变量。 可用名称不可用名称a1tri…