函数式组件之防抖

现在react基本都是函数式组件的写法，你会发现用到使用防抖函数场景的时候，发现自己原来写的防抖函数不生效了，究其原因是因为函数式组件每次都会重新创建，从而每次都重新创建定时器导致防抖时效，简单记录一下：

import { useEffect, useRef } from "react"

export const useDebounce = (fn:Function, delay:number)=>{
    //使用useRef保存计数器，这样就能保证在组件更新时始终是同一个计时器，而不是重新创建
    const {current} = useRef<{timmer:any}>({timmer:null})
    useEffect(()=>{
        return ()=>{
            //组件销毁时清除计时器
            clearTimeout(current.timmer)
        }
    },[])
    return function(...args:any[]){
        //如果计时器存在，则清除该计时器
        if(current.timmer){
            clearTimeout(current.timmer)
        }
        //重新赋值计时器，并在计时结束后执行回调函数
        current.timmer = setTimeout(() => {
            fn.apply(useDebounce,args)
        }, delay);
    }
}

这样我们的自定义防抖hooks接受两个参数：防抖处理的函数和防抖的延时时间，hooks返回值是经过防抖处理的函数，这样防抖功能就生效了。