【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即可。