持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天，点击查看活动详情
今天开始一起学习分享 ahooks 的源码
ahooks是阿里巴巴出品的一套高质量可靠的 React Hooks 库
今天分享 第22个 hooks-useThrottle
useThrottle
useThrottle 的作用是什么
useThrottle 的作用是 用来处理节流值的 Hook。
接下来 看下 API
API
const throttledValue = useThrottle(
value: any,
options?: Options
);
Params
一共只有2个参数
第1个参数是value，表示需要节流的值
第2个参数是options，表示配置节流的行为
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 需要节流的值 | any | - |
| options | 配置节流的行为 | Options | - |
Options
一共有4个可配置的参数
第1个参数是wait，表示超时时间，单位为毫秒
第2个参数是leading，表示是否在延迟开始前调用函数
第3个参数是trailing，表示是否在延迟开始后调用函数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| wait | 等待时间，单位为毫秒 | number | 1000 |
| leading | 是否在延迟开始前调用函数 | boolean | true |
| trailing | 是否在延迟开始后调用函数 | boolean | true |
接下来 看下 用法
基础用法
ThrottledValue 每隔 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>
);
};
当用户输入完之后500ms才显示出来，
接下来一起看下 源码
源码
1.首先定义 传入参数的类型
export interface DebounceOptions {
wait?: number;
leading?: boolean;
trailing?: boolean;
}
value: T, options?: ThrottleOptions
2.然后引入useThrottleFn这个hooks，这个hooks是处理节流的函数
import useThrottleFn from '../useThrottleFn';
3.使用state保存传入的value
const [throttled, setThrottled] = useState(value);
4.然后使用useThrottleFn返回 防抖后的函数 run ，同时在防抖函数中更新value
const { run } = useThrottleFn(() => {
setThrottled(value);
}, options);
5.最后在useEffect中执行 防抖后的函数 run，依赖数组是value
useEffect(() => {
run();
}, [value]);
6.最后返回 节流的 值
return throttled;
