ahooks源码分析-useDebounce

1,504 阅读2分钟

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

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

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

今天分享 第18个 hooks-useDebounce

useDebounce

useDebounce 的作用是什么

useDebounce 的作用是 用来处理防抖值的 Hook。

接下来 看下 API

API

const debouncedValue = useDebounce(
  value: any,
  options?: Options
);

Params

一共只有2个参数

第1个参数是value,表示需要防抖的值

第2个参数是options,表示配置防抖的行为

参数说明类型默认值
value需要防抖的值any-
options配置防抖的行为Options-

Options

一共有4个可配置的参数

第1个参数是wait,表示超时时间,单位为毫秒

第2个参数是leading,表示是否在延迟开始前调用函数

第3个参数是trailing,表示是否在延迟开始后调用函数

第4个参数是maxWait,表示最大等待时间,单位为毫秒

参数说明类型默认值
wait超时时间,单位为毫秒number1000
leading是否在延迟开始前调用函数booleanfalse
trailing是否在延迟开始后调用函数booleantrue
maxWait最大等待时间,单位为毫秒number-

接下来 看下 用法

基础用法

DebouncedValue 只会在输入结束 500ms 后变化。

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

export default () => {
  const [value, setValue] = useState<string>();
  const debouncedValue = useDebounce(value, { wait: 500 });

  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Typed value"
        style={{ width: 280 }}
      />
      <p style={{ marginTop: 16 }}>DebouncedValue: {debouncedValue}</p>
    </div>
  );
};

当用户输入完之后5ms才显示出来,

image.png

接下来一起看下 源码

源码

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


export interface DebounceOptions {
  wait?: number;
  leading?: boolean;
  trailing?: boolean;
  maxWait?: number;
}


value: T, options?: DebounceOptions

2.然后引入 useDebounceFn这个hooks,这个hooks是处理防抖的函数,我们下次再分析这个hooks。

import useDebounceFn from '../useDebounceFn';

3.使用state保存传入的value

const [debounced, setDebounced] = useState(value);

4.然后使用useDebounceFn返回 防抖后的函数 run ,同时在防抖函数中更新value

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

5.最后在useEffect中执行 防抖后的函数 run,依赖数组是value

useEffect(() => {
    run();
  }, [value]);

其他hooks

useLatest

useEventListener

useClickAway

useDocumentVisibility

useTitle