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)}/>
);
}