react 封装防抖

封装防抖

javascript 复制代码
import React, { useRef, useEffect, useCallback } from 'react';
 
function useDebounce(fn, delay) {
  const delayRef = useRef(delay);
  const fnRef = useRef(fn);
 
  // 更新ref值
  useEffect(() => {
    delayRef.current = delay;
  }, [delay]);
 
  useEffect(() => {
    fnRef.current = fn;
  }, [fn]);
 
  const debounced = useRef();
 
  // 防抖函数
  const debounce = useCallback((...args) => {
    const later = () => {
      debounced.current = null;
    };
 
    clearTimeout(debounced.current);
    debounced.current = setTimeout(() => {
      fnRef.current(...args);
      later();
    }, delayRef.current);
  }, []);
 
  useEffect(
    () => () => {
      clearTimeout(debounced.current);
    },
    []
  );
 
  return debounce;
}
 
export default useDebounce;

使用方法

javascript 复制代码
import React, { useState } from 'react';
import useDebounce from './useDebounce';
 
const MyComponent = () => { 
  // 创建防抖函数
  const debouncedHandleChange = useDebounce(() => {
    console.log('防抖触发了');
  }, 500);
 
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => {
        debouncedHandleChange(e);
      }}
    />
  );
};
 
export default MyComponent;

注:本人前端小白 ,如有不对的地方还请多多指教

相关推荐
ElasticPDF-新国产PDF编辑器9 分钟前
Angular use pdf.js and Elasticpdf tutorial
javascript·pdf·angular.js
吃没吃16 分钟前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam17 分钟前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH27618 分钟前
Android Retrofit用法详解
前端
鸭梨大大大20 分钟前
Spring Web MVC入门
前端·spring·mvc
你的人类朋友20 分钟前
MQTT协议是用来做什么的?此协议常用的概念有哪些?
javascript·后端·node.js
吃没吃22 分钟前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH27624 分钟前
Android Room用法详解
前端
木木黄木木1 小时前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d
美食制作家1 小时前
【无标题】Threejs第一个3D场景
javascript·three