useThrottleEffect 是 ahooks 提供的节流版 useEffect，它在依赖项变化时执行副作用函数，但会限制执行频率。

一、基本语法

useThrottleEffect(effect: React.EffectCallback,deps?: React.DependencyList,options?: Options
)

二、参数详解

2.1. effect (必需)

副作用函数，与 useEffect 的第一个参数相同，可以返回一个清理函数。

2.2 deps (可选)

依赖数组，与 useEffect 的第二个参数相同。当数组中的值发生变化时，会触发节流判断。

2.3. options (可选)

配置对象，包含以下属性：

三、使用示例

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