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
防抖

使用webpack配置react-hot-loader热加载局部更新
这篇文章主要介绍了使用webpack配置react-hot-loader热加载局部更新，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
详解Ref在React中的交叉用法
众所周知，react推出了hooks之后，很多项目就开始往hooks上靠拢，所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西
2021-06-06
react项目优化配置的操作详解
这篇文章主要介绍了react项目优化配置,主要包括优化配置CDN，优化路由懒加载，结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
基于Cloud Studio构建React完成点餐H5页面(腾讯云 Cloud Studio 实战训练营)
最近也是有机会参与到了腾讯云举办的腾讯云Cloud Studio实战训练营，借此了解了腾讯云Cloud Studio产品,下面就来使用腾讯云Cloud Studio做一个实战案例来深入了解该产品的优越性吧,感兴趣的朋友跟随小编一起看看吧
2023-08-08
记一个React.memo引起的bug
memo可以自己决定是否更新，但它是一个函数组件而非一个类，本文主要介绍了React.memo引起的bug，具有一定的参考价值，感兴趣的可以了解一下
2022-03-03
解决React报错Property 'X' does not
这篇文章主要为大家介绍了解决React报错Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
React Native 截屏组件的示例代码
本篇文章主要介绍了React Native 截屏组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
详解Stack Navigator中使用自定义的Render Callback
这篇文章主要为大家介绍了Stack Navigator中使用自定义的Render Callback使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
react拖拽组件react-sortable-hoc的使用
本文主要介绍了react拖拽组件react-sortable-hoc的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
React Router 中实现嵌套路由和动态路由的示例
React Router 是一个非常强大和灵活的路由库，它为 React 应用程序提供了丰富的导航和 URL 管理功能，能够帮助我们构建复杂的单页应用和多页应用，这篇文章主要介绍了React Router 中如何实现嵌套路由和动态路由,需要的朋友可以参考下
2023-05-05