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

React中实现防抖功能的两种方式小结

 更新时间：2023年10月23日 10:51:09   作者：milugloomy  
这篇文章主要介绍了React中实现防抖功能的两种方式小结,具有很好的 参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题

这有一个简单的防抖函数，短时间内多次触发同一事件，只执行最后一次

function debounce (fn, wait) {
  let timer = null
  return function (...args) {
    if (timer !== null) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn(args)
      timer = null
    }, wait)
  }
}

但问题是这个函数在react中使用不生效

export default () => {
  const handleClick = debounce(() => console.log("click fast!"), 1000));
  return (
     <button onClick={handleClick}>click fast!</button>
  );
};

原因就是函数式组件每次渲染，函数都会被重建，导致平时用的 debounce 函数中的timer会重新创建，进而导致防抖失效。

方案一

使用useRef来缓存timer变量

export default function () {
  const click = useDebounce((e: Event) => {
    console.log(e);
  }, 1000)
  
  return (
    <button onClick={click}>按钮</button>
  );
}

function useDebounce(fn: Function, delay: number) {
  const refTimer = useRef<number>();

  return function f(...args: any) {
    if (refTimer.current) {
      clearTimeout(refTimer.current);
    }
    refTimer.current = setTimeout(() => {
      fn(args);
    }, delay);
  }
}

方案二

使用useCallback来缓存函数，只要第二个参数传空数组，那么在组件重新选然时，useCallback中的函数就不会重新创建

export default function DeBounce() {
  const click = useCallback(clickInner(), []);

  function clickInner() {
    let timer: number;
    return function (e: Event) {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        console.log(e);
      }, 1000);
    }
  }

  return (
    <button onClick={click}>按钮</button>
  );
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • React拖拽调整大小的组件

    React拖拽调整大小的组件

    这篇文章主要为大家详细介绍了React拖拽调整大小的组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • React Redux管理库示例详解

    React Redux管理库示例详解

    这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下
    2022-12-12
  • 详解React Hooks是如何工作的

    详解React Hooks是如何工作的

    React Hooks是在React 16.8版本新增的特性，在我看了React官网和一些博客对React Hook的讲解后还是觉得没有get到本质。本篇博客通过手动实现useState()来了解Hook的原理和本质。阅读此篇博客的前提是你要知道一些 React Hooks的基本用法和使用规则，不然会看得云里雾里。
    2021-05-05
  • react实现一个优雅的图片占位模块组件详解

    react实现一个优雅的图片占位模块组件详解

    这篇文章主要给大家介绍了关于react如何实现一个还算优雅的占位模块图片组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

    Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

    今天是使用 Reactjs + Nodejs + Mongodb 实现文件上传功能，前端我们使用 Reactjs + Axios 来搭建前端上传文件应用，后端我们使用 Node.js + Express + Multer + Mongodb 来搭建后端上传文件处理应用，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
    2022-06-06
  • React新扩展函数setState与lazyLoad及hook介绍

    React新扩展函数setState与lazyLoad及hook介绍

    这篇文章主要介绍了React新扩展函数setState与lazyLoad及hook，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • react-intl实现React国际化多语言的方法

    react-intl实现React国际化多语言的方法

    这篇文章主要介绍了react-intl实现React国际化多语言的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • React中使用Echarts无法显示title、tooltip等组件的解决方案

    React中使用Echarts无法显示title、tooltip等组件的解决方案

    这篇文章主要介绍了React中使用Echarts无法显示title、tooltip等组件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • react实现点击选中的li高亮的示例代码

    react实现点击选中的li高亮的示例代码

    本篇文章主要介绍了react实现选中的li高亮的示例代码，页面上有很多个li，要实现点击到哪个就哪个高亮。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • React基于路由的代码分割技术详解

    React基于路由的代码分割技术详解

    这篇文章主要为大家介绍了React基于路由的代码分割技术详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12

最新评论