現(xiàn)在react基本都是函數(shù)式組件的寫(xiě)法，你會(huì)發(fā)現(xiàn)用到使用防抖函數(shù)場(chǎng)景的時(shí)候，發(fā)現(xiàn)自己原來(lái)寫(xiě)的防抖函數(shù)不生效了，究其原因是因?yàn)楹瘮?shù)式組件每次都會(huì)重新創(chuàng)建，從而每次都重新創(chuàng)建定時(shí)器導(dǎo)致防抖時(shí)效，簡(jiǎn)單記錄一下：

import { useEffect, useRef } from "react"

export const useDebounce = (fn:Function, delay:number)=>{
    //使用useRef保存計(jì)數(shù)器，這樣就能保證在組件更新時(shí)始終是同一個(gè)計(jì)時(shí)器，而不是重新創(chuàng)建
    const {current} = useRef<{timmer:any}>({timmer:null})
    useEffect(()=>{
        return ()=>{
            //組件銷毀時(shí)清除計(jì)時(shí)器
            clearTimeout(current.timmer)
        }
    },[])
    return function(...args:any[]){
        //如果計(jì)時(shí)器存在，則清除該計(jì)時(shí)器
        if(current.timmer){
            clearTimeout(current.timmer)
        }
        //重新賦值計(jì)時(shí)器，并在計(jì)時(shí)結(jié)束后執(zhí)行回調(diào)函數(shù)
        current.timmer = setTimeout(() => {
            fn.apply(useDebounce,args)
        }, delay);
    }
}

這樣我們的自定義防抖hooks接受兩個(gè)參數(shù)：防抖處理的函數(shù)和防抖的延時(shí)時(shí)間，hooks返回值是經(jīng)過(guò)防抖處理的函數(shù)，這樣防抖功能就生效了。