React hooks中节流的处理

最新推荐文章于 2023-11-19 20:22:18 发布
VIP文章 最新推荐文章于 2023-11-19 20:22:18 发布
阅读量3.4k 收藏 6
点赞数 1
分类专栏： 工作记录 文章标签： reactjs 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37473645/article/details/109681464
版权

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

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

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

节流

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

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

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

用计时器实现，就是用闭包把定时器id存储起来，如果定时器id不存在就新建一个定时器，延迟执

最低0.47元/天 解锁文章
红浴巾
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
通过实例学习React中事件节流防抖
10-16
主要介绍了通过实例学习React中事件节流防抖，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
防抖节流以及React Hook中的防抖节流
lovezhuer1的博客
03-22 4308
React Hook防抖前言一、pandas是什么？二、使用步骤1.引入库2.读入数据使用Umi Hooks防抖节流 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： impor
React 自定义hook 之 防抖和节流
最新发布
qq_37011724的博客
11-19 584
防抖和节流主要用于控制事件触发频率，提高页面性能和用户体验。防抖: 当事件被触发后，在一定时间内有新的对应事件，则会取消老的事件执行。节流: 当事件触发后，在一定时间内会忽略新的事件执行。
一文搞懂如何在 React 中使用 防抖（Debounce）和 节流（Throttle）
小陈的博客
02-27 5762
在自定义 hook 中，使用了另外一个 state 进行保存和更新状态，只有在间隔时间到了才会更新，然后将这个新的 state 返回出去，在页面上可以这样使用，直接依赖 返回出来的状态，这样每次这个状态改变时，就是间隔时间到了的时候，就可以进行异步请求了。而节流函数则是每隔一段时间就执行一次请求。在前端开发中，防抖和节流函数几乎是必备的技能，它们的实现原理都离不开 js 闭包的特性，而在 React 中通过使用自定义的 hook，可以达到一样的效果，有些场景下可能还更方便些，但总的来说本质还是那样。
react-hooks的节流与闭包，以及useCallback的用处
qq_40610760的博客
11-15 1077
useThrottle: 封装了一个节流的hook useCallback的作用（性能优化） 不用Hook封装节流方法的情况，看是怎么形成闭包的：
自定义Hooks(防抖，节流)
dandan0131的博客
09-28 908
简单的防抖 // 一个最简单的防抖 function debounce(fun, wait = 50) { let timer; return function (...args) { // 有新的请求进来就干掉原来的计时器，重新开始计时 if (timer) { clearTimeout(timer); } // 计时器完成，执行函数 timer = setTimeout(() => { fun.apply(this, ar
[Vue3][React]自定义hooks实现防抖节流
SCUhzs
12-23 679
[Vue3][React]自定义hooks实现防抖节流
防抖和节流使用es6以及自定义hook实现
mxm_xixixi的博客
06-15 2722
什么是防抖和节流，他们的应用场景有哪些，如何实现 防抖与节流都是前端优化的方案，使用后可以节省前端消耗的资源，针对不用的场景采用合适的方案 防抖[debounce]是高频事件触发后，n秒内只执行一次，连续触发就会发生抖动，为了防止抖动会在连续触发中取消上一次事件，直达间隔时间达到n秒开始执行事件，总结来说就是防抖取连续触发的最后一次动作 实现逻辑：闭包实现，自定义Hook实现 //闭包实现逻辑：闭包中存储的变量不会被回收 const debounce = (fn,time)=>{ let
React Hooks with Immer 中的简单不变性。
06-08
React Immer Hooks 在带有 Immer 的 React Hooks 中轻松实现不变性。注意：React Hooks 目前是一个 RFC 提案，可能会发生变化。您至少需要 [email protected] 才能使用此功能。安装 yarn add react-immer-hooks 用法...
React Redux 绑定与 React Hooks 和代理
06-08
有几个与此 repo 相关的项目。 这是它们的索引。 react-react-redux v5-alpha (this repo)：它有一个实验性的 react...react-react-redux 使用 React Hooks 和 Proxy 绑定 React Redux 如果您正在寻找非 Redux 库，请访
React Hooks库-React开发
05-27
简体中文对React Hooks库表示敬意。 :books:文档English中文:sparkles:功能易于学习和使用。 包含大量从应用程序中提炼出来的高级挂钩。 包含大量基本的挂钩。 用具有可预测的静态类型的TypeScript编写。 :package:...
react-hooks-axios:自定义React Hooks for Axios.js
04-28
react-hooks-axios 自定义React Hooks for Axios.js安装注意：确保已安装正确版本的react(>= v16.8.0)和react-dom(>= v16.8.0) 。npm npm install --save @use-hooks/axios纱yarn add @use-hooks/axios原料药参量/**...
React hooks 防抖节流的写法
weixin_49266760的博客
05-19 665
背景 用户再使用软件的时候，可能会因为网络和硬件的问题，会可能会导致我们点击的时候没有反应，使客户端多次向服务器发送请求， 或者有些人不怀好意的恶意攻击，来增加服务器的压力，这个时候我们可以用防抖和节流来做，从而来达到目的 废话少说上代码 我们可以在utils中写一个帮助方法，这样可以多次使用 // 防抖 export function useDebounce(fn, delay, dep = []) { const { current } = useRef({ fn, timer: null
react 防抖节流
qq_43358937的博客
08-13 147
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怎样封装防抖和节流-面试真题
beifeng11996的博客
11-01 290
防抖函数，我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生，在定时器期间事件再次触发的话则清除重置定时器，直到定时器到时仍不被清除，事件才真正发生。但是这里搜索框的例子并不好，对值变化之后发起的请求可以进行节流，但是因为搜索框需要实时呈现输入的内容，就需要实时的。节流函数相对于防抖函数用在事件触发更为频繁的场景上，滑动事件，滚动事件，动画上。的调用就符合了节流规则。，对于事件触发频繁的场景，只有最后由程序控制的事件是有效的。函数传入节流函数，得到一个新函数，手势事件中使用新函数，那么。
js和React Hooks的防抖和节流
me_never的博客
06-09 1425
概念 防抖：多次连续调用执行一次 节流：多次连续调用，在一段时间内只执行一次 两者的目的都是减少触发的次数，保证性能和效率，区别在于业务场景和需求的不同。可以触发防抖和节流的事件有：onscroll、onmouseMove、onChange、onResize等。 具体怎么实现的还是看代码比较容易理解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
react 的Hook 中 使用防抖节流
梦想成为全栈的切图仔
05-12 423
// const useDebounce = (value, delay) => { // const [debouncedValue,setDebouncedValue] = useSate(value) // useEffect(() => { // const timeout = setTimeout(() => setDebouncedValue(value), delay) // return () => clearTimeout(timeout) // },[.
react hooks中的生命周期
08-09
引用中提到，React Hooks是一种新增的特性，它可以让我们在函数组件中使用state和其他React特性，例如生命周期。在使用Hooks之前，函数组件是无状态的，无法访问React生命周期。而使用Hooks后，我们可以使用一些特定的Hooks函数来模拟类组件的生命周期。其中，useState函数可以用来管理组件的状态，useEffect函数可以在组件渲染完成之后执行一些操作，而useLayoutEffect函数则可以在组件渲染之后同步执行一些操作。这些Hooks函数既可以替代类组件中的生命周期方法，又能让我们在函数组件中方便地管理状态和执行操作，从而实现类似生命周期的功能。所以，可以说在React Hooks中，生命周期的概念其实就是通过使用useState、useEffect和useLayoutEffect这些Hooks函数来实现的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值