脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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使用Canvas绘制大数据表格的实例代码

    React使用Canvas绘制大数据表格的实例代码

    之前一直想用Canvas做表格渲染的,最近发现了一个很不错的Canvas绘图框架Leafer,api很友好就试着写了一下,文中有详细的代码示例供大家参考,感兴趣的小伙伴可以自己动手试试
    2023-09-09
  • React中props使用教程

    React中props使用教程

    props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点，props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用
    2022-09-09
  • Can't perform a React state update on an unmounted component报错解决

    Can't perform a React state update on an unmoun

    这篇文章主要为大家介绍了Can't perform a React state update on an unmounted component报错解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • React函数式组件的性能优化思路详解

    React函数式组件的性能优化思路详解

    这篇文章主要介绍了React函数式组件的性能优化思路详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • React-router中结合webpack实现按需加载实例

    React-router中结合webpack实现按需加载实例

    本篇文章主要介绍了React-router中结合webpack实现按需加载实例，非常具有实用价值，需要的朋友可以参考下
    2017-05-05
  • React反向代理及样式独立详解

    React反向代理及样式独立详解

    这篇文章主要介绍了React反向代理及样式独立详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
    2022-08-08
  • React里的Fragment标签的具体使用

    React里的Fragment标签的具体使用

    本文主要介绍了React里的Fragment标签的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • React实现todolist功能

    React实现todolist功能

    这篇文章主要介绍了React实现todolist功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-12-12
  • React传递参数的几种方式

    React传递参数的几种方式

    本文详细的介绍了React传递参数的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • 浅谈从React渲染流程分析Diff算法

    浅谈从React渲染流程分析Diff算法

    这篇文章主要介绍了浅谈从React渲染流程分析Diff算法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论