useThrottleEffect
是 ahooks
提供的节流版**useEffect
**,它在依赖项变化时执行副作用函数,但会限制执行频率。
一、基本语法
javascript
useThrottleEffect(
effect: React.EffectCallback,
deps?: React.DependencyList,
options?: Options
)
二、参数详解
2.1. effect (必需)
副作用函数,与 useEffect
的第一个参数相同,可以返回一个清理函数。
2.2 deps (可选)
依赖数组,与 useEffect
的第二个参数相同。当数组中的值发生变化时,会触发节流判断。
2.3. options (可选)
配置对象,包含以下属性:
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
wait | number | 1000 | 节流等待时间,单位毫秒 |
leading | boolean | true | 是否在节流开始前立即执行 |
trailing | boolean | true | 是否在节流结束后执行 |
maxWait | number | - | 最大等待时间,保证至少每隔这个时间执行一次 |
三、使用示例
3.1 基础用法
javascript
import { useThrottleEffect } from 'ahooks';
import { useState } from 'react';
function SearchComponent() {
const [keyword, setKeyword] = useState('');
useThrottleEffect(
() => {
// 这里执行搜索API调用或其他副作用
console.log('搜索关键词:', keyword);
// mock API call
// fetch(`/api/search?q=${keyword}`).then(...);
},
[keyword], // 依赖项
{ wait: 500 } // 500ms内只执行一次
);
return (
<input
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
placeholder="输入搜索内容..."
/>
);
}
3.2 高级配置示例
javascript
useThrottleEffect(
() => {
console.log('高级节流效果:', value);
// 执行一些计算量大的操作
},
[value],
{
wait: 300,
leading: false, // 不立即执行第一次
trailing: true, // 最后一次变化后执行
maxWait: 2000 // 确保至少每2秒执行一次
}
);
3.3 与清理函数结合示例
javascript
useThrottleEffect(
() => {
const timer = setTimeout(() => {
console.log('延迟执行的操作');
}, 100);
return () => {
clearTimeout(timer); // 清理函数
};
},
[dependency],
{ wait: 500 }
);