自定义React Hooks实现函数的防抖

1.场景

当用户在一个输入框输入某些值的时候，前端需要用到这些值来给后端发送请求，以获取相应的数据。

但是，我们如果当用户一修改输入框的值就往后端发送请求的话，这样就会导致请求的重复发送，造成了资源的浪费。

比如用户要输入ABC，如果不做处理，我们将会往后端发送三次请求，分别获得以  “A”，“AB”，“ABC” 为参数的不同返回结果。由于接口请求返回速度的原因，可能导致渲染到页面上的结果不是用户想要的结果。

2.解决办法

自定义useDebounce钩子

import React, {useEffect, useState} from 'react';

const useDebounce = (value:any,delay:number=300) => {
    const [debouncevalue, setDebouncevalue] = useState(value);
    useEffect(() => {
        const handler=setTimeout(()=>{
            setDebouncevalue(value)
        },delay)
        return()=>{
            clearTimeout(handler)
        }
    }, [value,delay]);
    return debouncevalue
};

export default useDebounce;

其中的debouncedvalue的值就是我们input框中value的值，当用户输入了新的值的时候，如果与上次输入的间隔小于300毫秒，那么不会更新debouncedvalue的值，因此不会向后端发送请求。如果大于了300毫秒，那么将会执行setDebouncevalue（value）更新debouncevalue的值。

发送请求组件

const fetch= () => {
    //输入框的value值
    const [inputValue, setInputValue] = useState<string>(value as string);
    //防抖的value 在输入后300毫秒内 如果没有新的输入的话 才会更新debouncedValue为inputValue
    const debouncedValue=useDebounce(inputValue,300)
    useEffect(() => {
        if(debouncedValue){
            //fetch模拟向后端发送请求
            const results = fetch(debouncedValue)
    }, [debouncedValue]);

return (
       <input value={inputValue} onChange={(e)=>setInputValue(e.target.value)}/>
    );
}