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 }
);
相关推荐
lbh4 分钟前
简单文本编辑器:基于原生JavaScript的智能文本选择工具栏
前端·javascript
Jackson__5 分钟前
高效 AI 对话:如何写出更好的 Prompt
前端
典学长编程10 分钟前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第三天(JavaScript)
前端·javascript·css·html·前端开发
德育处主任16 分钟前
p5.js 用 beginGeometry () 和 endGeometry () 打造自定义 3D 模型
前端·前端框架·canvas
文火冰糖的硅基工坊27 分钟前
[硬件电路-124]:模拟电路 - 信号处理电路 - 测量系统的前端电路详解
前端·嵌入式硬件·fpga开发·架构·信号处理·电路
爷_1 小时前
手把手教程:用腾讯云新平台搞定专属开发环境,永久免费薅羊毛!
前端·后端·架构
狂炫一碗大米饭1 小时前
如何在 Git 中检出远程分支
前端·git·github
东风西巷2 小时前
猫眼浏览器:简约安全的 Chrome 内核增强版浏览器
前端·chrome·安全·电脑·软件需求
太阳伞下的阿呆2 小时前
npm安装下载慢问题
前端·npm·node.js
pe7er2 小时前
Tauri 应用打包与签名简易指南
前端