持续创作,加速成长!这是我参与「掘金日新计划 · 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 | 超时时间,单位为毫秒 | number | 1000 |
leading | 是否在延迟开始前调用函数 | boolean | false |
trailing | 是否在延迟开始后调用函数 | boolean | true |
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才显示出来,
接下来一起看下 源码
源码
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]);