【React】防抖自定義hook，狸貓換太子

前言

• 我這也是看了別人學到的，一般我們防抖就寫個防抖函數然後一套就完事了，我看見的這個防抖hook思路清奇，玩了個狸貓換太子，讓我想記錄下來。

思路

• 比如輸入框要觸發個搜索查詢，那麼就搞個防抖，正常來說，我們把防抖函數套在原來執行邏輯上就ok，實際頻繁觸發的是防抖函數，而不是防抖包着的那個函數。
• 而我這次看見的這個思路是延遲值的內部更新。
• 就是在受控組件裏，用戶輸入的值會在組件的狀態中，這個hook自己維護一個狀態，替代原來組件真正的值的狀態，而執行函數，從本來依賴真正的值，到依賴這個替代的值，利用useEffect進行延遲觸發。
• 代碼：

function useDebounce(value:any,delay=300){
    const [debounceValue,setDebouncedValue]=useState(value)
    useEffect(()=>{
        const handler=setTimeout(() => {
            setDebouncedValue(value)
        }, delay)
        return ()=>{
            clearTimeout(handler)
        }
    },[value,delay])
    return debounceValue
}
export default useDebounce

• 使用：

 const debouncedValue=useDebounce(state,500)

• 這個debouncedValue就是替代了state的假值，state會根據用戶輸入不斷改變，但是debouncedValue不會立即跟着改變，而是通過handler的延遲函數進行改變，當頻繁觸發時，直接卸載以前的定時器，製作新的定時器觸發，這個地方跟原本的防抖函數一樣。
• 最後需要執行的函數通過useEffect依賴這個被替代的state即可。