React hooks中节流的处理

最新推荐文章于 2023-11-19 20:22:18 发布
最新推荐文章于 2023-11-19 20:22:18 发布
阅读量3.6k 收藏 6
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 工作记录 文章标签： reactjs 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37473645/article/details/109681464
本文讨论了在React Hooks开发中遇到的节流问题，描述了在快速点击获取手机验证码按钮时导致的多次请求发送。文章分析了节流的原理，包括时间戳和定时器两种实现方式，并提到了在Hooks环境下，由于每次渲染都会创建新的函数导致节流失效。解决方案是利用`useCallback`来缓存节流函数，确保在组件更新时使用同一个函数，从而实现节流效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

背景：采用React hooks来进行开发，确认自己写的节流函数没有问题后，在获取取手机验证码的操作中，快速多次点击按钮“获取手机验证码”，仍然造成多次发送请求。

如图，快速连续点击获取验证码按钮，发送了三个getcode的请求

解决此问题一般采用节流解决

节流

节流：在规定时间内，函数只执行一次。例如，2秒内点击同一按钮多次，但按钮所绑定的事件只执行一次。2秒后，按钮又被点击的话，函数在点击后的2秒内又只执行一次，不点击就不执行。

原理：闭包。节流一般有两种实现方式，时间戳和定时器。

用时间戳实现，就是用闭包把点击时的时间戳存储起来，然后判断当前时间与存储的时间戳的差值是否大于我们规定的时间，大于就执行所要执行的函数，小于就不执行。

用计时器实现，就是用闭包把定时器id存储起来，如果定时器id不存在就新建一个定时器，延迟执行定时器里的所要执行的函数以及清除定时器，如果定时器id存在就不管它。

这里有节流的时间戳和定时器的简易版代码可以参考一下。

/*
 * 时间戳版本
 * @param
最低0.47元/天 解锁文章

200万优质内容无限畅学
react防抖和节流hooks封装
任磊
07-25 2379
react防抖和节流hooks封装以及注意事项
React-Hooks怎样封装防抖和节流-面试真题
beifeng11996的博客
11-01 396
防抖函数，我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生，在定时器期间事件再次触发的话则清除重置定时器，直到定时器到时仍不被清除，事件才真正发生。但是这里搜索框的例子并不好，对值变化之后发起的请求可以进行节流，但是因为搜索框需要实时呈现输入的内容，就需要实时的。节流函数相对于防抖函数用在事件触发更为频繁的场景上，滑动事件，滚动事件，动画上。的调用就符合了节流规则。，对于事件触发频繁的场景，只有最后由程序控制的事件是有效的。函数传入节流函数，得到一个新函数，手势事件中使用新函数，那么。
防抖节流以及React Hook中的防抖节流
lovezhuer1的博客
03-22 5140
React Hook防抖前言一、pandas是什么？二、使用步骤1.引入库2.读入数据使用Umi Hooks防抖节流 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： impor
react-hooks的节流与闭包，以及useCallback的用处
qq_40610760的博客
11-15 1321
useThrottle: 封装了一个节流的hook useCallback的作用（性能优化） 不用Hook封装节流方法的情况，看是怎么形成闭包的：
react 防抖节流
qq_43358937的博客
08-13 218
import React, {useState} from "react"; import debounce from 'lodash/debounce'; const sendQuery = (query) => console.log(`Querying for ${query}`); const Search = () => { const [userQuery, setUserQuery] = useState(""); const delayedQuery = debounc.
整理一下react hooks版本的 防抖节流
nihaoljs的博客
07-16 431
react 防抖节流
js和React Hooks的防抖和节流
me_never的博客
06-09 1535
概念 防抖：多次连续调用执行一次 节流：多次连续调用，在一段时间内只执行一次 两者的目的都是减少触发的次数，保证性能和效率，区别在于业务场景和需求的不同。可以触发防抖和节流的事件有：onscroll、onmouseMove、onChange、onResize等。 具体怎么实现的还是看代码比较容易理解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
React 防抖与节流用法
TianXuab的博客
09-08 2000
当用户频繁滚动页面或调整窗口大小时，我们可以设置一个固定的时间间隔，只在该时间间隔内执行一次回调函数。在React中使用防抖的常见场景是处理输入框的搜索功能。当用户输入时，我们可以设置一个延迟时间，只有在用户停止输入一段时间后才触发搜索请求。请注意，以上示例代码中使用了Lodash库来提供防抖和节流的函数。函数会被调用，但是由于节流的作用，只有在200毫秒内第一次滚动事件触发时，才会真正执行滚动逻辑。但是，由于防抖的作用，只有在用户停止输入500毫秒后，才会执行真正的搜索逻辑。在上面的代码中，我们使用。
react 的Hook 中 使用防抖节流
梦想成为全栈的切图仔
05-12 478
// const useDebounce = (value, delay) => { // const [debouncedValue,setDebouncedValue] = useSate(value) // useEffect(() => { // const timeout = setTimeout(() => setDebouncedValue(value), delay) // return () => clearTimeout(timeout) // },[.
React hooks 防抖节流的写法
weixin_49266760的博客
05-19 788
背景 用户再使用软件的时候，可能会因为网络和硬件的问题，会可能会导致我们点击的时候没有反应，使客户端多次向服务器发送请求， 或者有些人不怀好意的恶意攻击，来增加服务器的压力，这个时候我们可以用防抖和节流来做，从而来达到目的 废话少说上代码 我们可以在utils中写一个帮助方法，这样可以多次使用 // 防抖 export function useDebounce(fn, delay, dep = []) { const { current } = useRef({ fn, timer: null
通过实例学习React中事件节流防抖
10-16
主要介绍了通过实例学习React中事件节流防抖，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
React 自定义hook 之 防抖和节流
最新发布
qq_37011724的博客
11-19 1018
防抖和节流主要用于控制事件触发频率，提高页面性能和用户体验。防抖: 当事件被触发后，在一定时间内有新的对应事件，则会取消老的事件执行。节流: 当事件触发后，在一定时间内会忽略新的事件执行。
React-Hook
wugank的博客
09-28 218
自定义hooks的时候 命名必须是小驼峰的写法：例如：useData Hooks 防抖: export function useFangFn(params, dely = 200) { const [state, setState] = useState(params) let timer = useRef(null).current // 这里的setvalue==用户使用的setvalue() const setvalue = useRef(args => {
ahooks自带节流
qq_44880346的博客
06-10 693
官方文档https://ahooks.js.org/hooks/advanced/use-lock-fn import {useLockFn} from "ahooks" const onFinish = useLockFn (async () => { 这里需要异步 } )
防抖节流hooks，传入一个普通函数返回一个带有防抖或者节流的函数
weixin_44441196的博客
11-24 985
调用hooksFn方法，通过传入一个普通的函数，返回一个带有防抖或者节流的方法 该方法接接收3个参数，返回一个新函数 param: fn 需要进行防抖节流的普通函数 param: time防抖节流的时间 param: type需要返回的函数时防抖还是节流 （notShake:防抖 throttle：节流） type Type = 'notShake' | 'throttle' /** * @params fn 要处理的方法； time 时间； type 返回的方法类型(notShake:防抖
自定义Hooks(防抖，节流)
dandan0131的博客
09-28 1024
简单的防抖 // 一个最简单的防抖 function debounce(fun, wait = 50) { let timer; return function (...args) { // 有新的请求进来就干掉原来的计时器，重新开始计时 if (timer) { clearTimeout(timer); } // 计时器完成，执行函数 timer = setTimeout(() => { fun.apply(this, ar
防抖和节流使用es6以及自定义hook实现
mxm_xixixi的博客
06-15 2848
什么是防抖和节流，他们的应用场景有哪些，如何实现 防抖与节流都是前端优化的方案，使用后可以节省前端消耗的资源，针对不用的场景采用合适的方案 防抖[debounce]是高频事件触发后，n秒内只执行一次，连续触发就会发生抖动，为了防止抖动会在连续触发中取消上一次事件，直达间隔时间达到n秒开始执行事件，总结来说就是防抖取连续触发的最后一次动作 实现逻辑：闭包实现，自定义Hook实现 //闭包实现逻辑：闭包中存储的变量不会被回收 const debounce = (fn,time)=>{ let
[Vue3][React]自定义hooks实现防抖节流
SCUhzs
12-23 862
[Vue3][React]自定义hooks实现防抖节流
一文搞懂如何在 React 中使用 防抖（Debounce）和 节流（Throttle）
小陈的博客
02-27 7368
在自定义 hook 中，使用了另外一个 state 进行保存和更新状态，只有在间隔时间到了才会更新，然后将这个新的 state 返回出去，在页面上可以这样使用，直接依赖 返回出来的状态，这样每次这个状态改变时，就是间隔时间到了的时候，就可以进行异步请求了。而节流函数则是每隔一段时间就执行一次请求。在前端开发中，防抖和节流函数几乎是必备的技能，它们的实现原理都离不开 js 闭包的特性，而在 React 中通过使用自定义的 hook，可以达到一样的效果，有些场景下可能还更方便些，但总的来说本质还是那样。
React Hooks 集合使用指南与功能解析
Hooks 是在React 16.8版本中引入的，目的是为了解决React中函数组件的一些限制，使得函数组件能够拥有处理副作用（Side Effects）的能力，从而更好地管理组件的状态。 在标题“react-hooks:React Hook 的集合”中，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值