React ahooks——副作用类hooks之useThrottleEffect

安心不心安2025-08-03 14:56

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