React ahooks——副作用类hooks之useThrottleEffect
useThrottleEffect 是 ahooks 提供的节流版 useEffect，它在依赖项变化时执行副作用函数，但会限制执行频率。
一、基本语法
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 基础用法
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 (<inputvalue={keyword}onChange={(e) => setKeyword(e.target.value)}placeholder="输入搜索内容..."/>);
}3.2 高级配置示例
useThrottleEffect(() => {console.log('高级节流效果:', value);// 执行一些计算量大的操作},[value],{wait: 300,leading: false, // 不立即执行第一次trailing: true, // 最后一次变化后执行maxWait: 2000 // 确保至少每2秒执行一次}
);3.3 与清理函数结合示例
useThrottleEffect(() => {const timer = setTimeout(() => {console.log('延迟执行的操作');}, 100);return () => {clearTimeout(timer); // 清理函数};},[dependency],{ wait: 500 }
);