脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react hooks防抖节流

react hooks实现防抖节流的方法小结

 更新时间：2024年04月19日 09:04:43   作者：双子座434  
这篇文章主要介绍了react hooks实现防抖节流的几种方法,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

下面均拿一个input框的onChange事件为例。

防抖

1.当持续触发事件时，一定时间段内没有再触发事件，事件处理函数会执行一次。

2.如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

代码：

方法一：

import React from "react";
 
function ThrotShak() {
  let shak;
 
  const service = (data) => {
    console.log('向服务端发送数据', data);
  }
 
  const handleChange = (e) => {
    if (shak) {
      clearTimeout(shak)
    }
 
    shak = setTimeout(() => {
      service(e.target.event);
    }, 3000)
  }
 
  return (
      <div style={{ flex: 1, border: '1px solid blue', padding: '3px' }}>
        <div>防抖：多次触发执行最后一次</div>
        <input onChange={handleChange} />
      </div>
  )
}
 
export default ThrotShak;

方法二：

import React from 'react';
import { debounce } from 'lodash';
 
function ThrotShak(){
  const service = (data) => {
    console.log('向服务端发送数据', data);
  }
 
  const handleChange = () => debounce(service, 500);
 
  return (
    <input type="text" onChange={handleChange} />
  );
};
 
export default ThrotShak;

节流

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

代码：

方法一：

import React from "react";
 
function ThrotShak() {
  const service = (data) => {
    console.log('向服务端发送数据', data, new Date());
  }
  let throt;
 
  function handleChange() {
    if (throt) {
      return ;
    }
    
    throt = setTimeout(() => {
      service();
      throt = null;
    }, 3000)
  }
 
  return (
      <div  style={{ flex: 1, border: '1px solid blue', padding: '3px' }}>
        <div>节流： 持续触发事件时，每过n钟执行一次</div>
        <input onChange={handleChange} />
      </div>
  )
}
 
export default ThrotShak;

方法二：

import React from 'react';
import { throttle } from 'lodash';
 
function ThrotShak(){
  const service = (data) => {
    console.log('向服务端发送数据', data);
  }
 
  const handleChange = () => throttle(service, 500);
 
  return (
    <input type="text" onChange={handleChange} />
  );
};
 
export default ThrotShak;

拓展：

除上面两种实现方法外，还可用用useEffect实现。无论哪种实现方式，大家要以自己的应用场景为准，还要考虑一下性能问题。本身选择防抖或者节流就是要提高性能（减少频繁触发事件，降低不必要的计算，渲染和服务器请求），节约资源（减少浪费服务器资源和带宽），提高用户体验（防止用户误触或者频繁点击）。

实现过程中大家要注意clearTimeout和把赋值参数置为null的区别：clearTimeout是指把定时器清楚掉，并不会把定时器的id置为null，一般用于定时器挂载并未执行时；把赋值参数置为null是要清除缓存，这里不懂得话，可以看一下闭包和浏览器垃圾回收机制得原理。在组件卸载时把定时器清除掉和id置为null一起调用比较好。

心得：

一题多解还是有必要得，既拓宽了自己得思路，又增加了解题技巧，当然，解题还是会受场景和代码框架约束得。

到此这篇关于react hooks实现防抖节流的方法小结的文章就介绍到这了,更多相关react hooks防抖节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React中ES5与ES6写法的区别总结

    React中ES5与ES6写法的区别总结

    这篇文章主要总结介绍了关于React中ES5与ES6的写法区别，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-04-04
  • 详解React中如何拆分组件

    详解React中如何拆分组件

    这篇文章主要为大家详细介绍了React中拆分组件的相关知识,文中的示例代码讲解详细,对我们掌握React有一定的帮助,需要的小伙伴可以参考一下
    2023-12-12
  • react路由跳转传参刷新页面后参数丢失的解决

    react路由跳转传参刷新页面后参数丢失的解决

    这篇文章主要介绍了react路由跳转传参刷新页面后参数丢失的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • React学习笔记之事件处理（二）

    React学习笔记之事件处理（二）

    这篇文章主要跟大家介绍了关于React中事件处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习React具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • 深入分析React源码中的合成事件

    深入分析React源码中的合成事件

    合成事件不是浏览器本身触发的事件，自己创建和触发的事件。本文将从源码角度带大家一起深入了解下React中的合成事件，需要的可以参考一下
    2022-11-11
  • React18系列reconciler从0实现过程详解

    React18系列reconciler从0实现过程详解

    这篇文章主要介绍了React18系列reconciler从0实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • 使用react完成点击返回顶部操作

    使用react完成点击返回顶部操作

    本文主要介绍了使用react完成点击返回顶部操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • React中嵌入多个组件的多种方式详解

    React中嵌入多个组件的多种方式详解

    在 React 中,嵌入和使用多个组件是构建用户界面的核心机制,React 鼓励组件化开发,允许将 UI 拆分为独立、可复用的部分,以下是实现多个组件嵌套和使用的常见方法,需要的朋友可以参考下
    2025-08-08
  • React编程模型之Project Reactor实际应用实例

    React编程模型之Project Reactor实际应用实例

    这篇文章主要介绍了React编程模型之Project Reactor实际应用实例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2025-05-05
  • 基于React Context实现一个简单的状态管理的示例代码

    基于React Context实现一个简单的状态管理的示例代码

    本文主要介绍了基于React Context实现一个简单的状态管理的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07

最新评论