useDebounceFn
时间: 2023-12-07 21:55:47 浏览: 22
useDebounceFn 是 React Hooks 中的一个自定义 Hook,用于创建一个防抖函数。防抖函数可以用来控制在一段时间内连续触发的事件只执行最后一次,从而减少不必要的重复操作,提升性能。
useDebounceFn 接受两个参数:
1. fn: 需要防抖的函数。
2. delay: 防抖时间,单位为毫秒。
useDebounceFn 返回一个数组,其中第一个元素是一个函数,当该函数被调用时,会启动一个计时器,在 delay 毫秒内不断调用 fn 函数。如果在这段时间内该函数再次被调用,则会重新开始计时。如果计时器到达 delay 毫秒,会执行一次 fn 函数。
第二个元素是一个布尔值,表示当前计时器是否处于活动状态。
示例代码:
```jsx
import { useState } from 'react';
import useDebounceFn from './useDebounceFn';
function SearchBar() {
const [inputValue, setInputValue] = useState('');
const [searchResult, setSearchResult] = useState([]);
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const [debouncedSearch, isSearching] = useDebounceFn(() => {
// 在这里执行需要防抖的操作,例如发送网络请求获取搜索结果
fetch(`https://api.example.com/search?q=${inputValue}`)
.then((response) => response.json())
.then((data) => {
setSearchResult(data);
});
}, 500);
return (
<div>
<input type="text" value={inputValue} onChange={handleInputChange} />
{isSearching ? <div>正在搜索...</div> : null}
<ul>
{searchResult.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
```