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