持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情

今天开始一起学习分享 ahooks 的源码

ahooks是阿里巴巴出品的一套高质量可靠的 React Hooks 库

今天分享 第23个 hooks-useThrottleEffect

useThrottleEffect

useThrottleEffect 的作用是什么

useThrottleEffect 的作用是 为 useEffect 增加节流的能力。

接下来 看下 API

API

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

Params

一共有3个参数

第1个参数是effect，表示执行的函数

第2个是deps，表示依赖的数组

第3个是options，表示配置节流的行为

参数	说明	类型	默认值
effect	执行函数	EffectCallback	-
deps	依赖数组	DependencyList	-
options	配置节流的行为，详见下面的 Options	Options	-

Options

一共有4个可配置的项

第1个是wait，表示等待时间，单位为毫秒

第2个是leading，表示是否在在延迟开始前调用

第3个是trailing，表示是否在在延迟结束后调用

参数	说明	类型	默认值
wait	等待时间，单位为毫秒	number	1000
leading	是否在在延迟开始前调用	boolean	true
trailing	是否在在延迟结束后调用	boolean	true

接下来 看下 用法

基础用法

import React, { useState } from 'react';
import { useThrottleEffect } from 'ahooks';

export default () => {
  const [value, setValue] = useState('hello');
  const [records, setRecords] = useState<string[]>([]);
  useThrottleEffect(
    () => {
      setRecords((val) => [...val, value]);
    },
    [value],
    {
      wait: 1000,
    },
  );
  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Typed value"
        style={{ width: 280 }}
      />
      <p style={{ marginTop: 16 }}>
        <ul>
          {records.map((record, index) => (
            <li key={index}>{record}</li>
          ))}
        </ul>
      </p>
    </div>
  );
};

当输入值的时候不会立即更新，而是增加了节流，会在指定时间内才会更新

接下来一起看下 源码

源码

1.首先定义传入参数的类型

import type { DependencyList, EffectCallback } from 'react';
export interface DebounceOptions {
  wait?: number;
  leading?: boolean;
  trailing?: boolean;
}


effect: EffectCallback,
  deps?: DependencyList,
  options?: ThrottleOptions,

2.定义一个state，表示是否更新

const [flag, setFlag] = useState({});

3.使用useThrottleFn这个hooks来返回 要 防抖的函数run

const { run } = useDebounceFn(() => {
    setFlag({});
  }, options);

4.在useEffect中执行 返回的防抖函数 run

useEffect(() => {
    return run();
  }, deps);

5.在useUpdateEffect执行要防抖的函数，依赖数组是flag

 useUpdateEffect(effect, [flag]);

其他hooks

useLatest

useEventListener

useClickAway

useDocumentVisibility

useTitle