React ahooks——副作用类hooks之useThrottleEffect

useThrottleEffectahooks 提供的节流版**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 }
);
相关推荐
siroi2 分钟前
【nginx】NJS 的简单实践
前端
饮水机战神3 分钟前
震惊!多核性能反降11%?node接口压力测试出乎意料!
前端·node.js
一只叁木Meow4 分钟前
JavaScript数学库深度对比
前端
顾辰逸you6 分钟前
uniapp--咸虾米壁纸项目(一)
前端·微信小程序
方方洛21 分钟前
电子书阅读器:epub电子书文件的解析
前端·产品·电子书
idaibin21 分钟前
Rustzen Admin 前端简单权限系统设计与实现
前端·react.js
GISer_Jinger27 分钟前
Trae Solo模式生成一个旅行足迹App
前端·javascript
zhangbao90s28 分钟前
Intl API:浏览器原生国际化API入门指南
前端·javascript·html
艾小码31 分钟前
构建现代前端工程:Webpack/Vite/Rollup配置解析与最佳实践
前端·webpack·node.js
跟橙姐学代码36 分钟前
Python 集合:人生中最简单的真理,只有一次
前端·python·ipython