一文搞懂如何在 React 中使用防抖（Debounce）和节流（Throttle）-Toy模板网

这篇具有很好参考价值的文章主要介绍了一文搞懂如何在 React 中使用防抖（Debounce）和节流（Throttle）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在前端的日常开发中，经常会使用到两个函数防抖（Debounce）和节流（Throttle），防抖函数可以有效控制在一段时间内只执行最后一次请求，例如搜索框输入时，只在输入完成后才进行请求接口。而节流函数则是每隔一段时间就执行一次请求。

在 React 应用开发时，不同于普通的 js，而且通过 react hook 机制，可以更方便的实现这两个功能。

防抖函数（Debounce）

从上面的图中可以看出，使用了防抖函数后，无论我们中间点了多少次，也只会在延时结束时执行一次。

使用 js 简单实现防抖函数

function debounce(fn: any, wait: number) {let timer: anyreturn (...args: any) => {// @ts-ignoreconst context = thisif (timer) clearTimeout(timer)timer = setTimeout(() => {timer = nullfn.apply(context,args)}, wait)}
}

防抖的原理比较简单，就是使用闭包保存住计时器 timer 和传递的函数，然后每次进入时都把之前的 timer 清空掉，这样延时 wait 每次都会从新开始计算，以此来达到只在延时结束后执行一次的效果。

在 React Input 中使用防抖函数

假设有个需求，用户通过输入商品名来搜索商品，那么不可能每次用户输入时都去请求后台接口，最好的处理方式就是加上防抖功能，只在用户输入完成后请求一次，这样做可以避免多次无效的调用后台接口。

实现这个功能用传统的方法可以这样做：

// 防抖函数，间隔时间为 2 秒
const changeDebounce = useCallback(debounce(handleChange, 2000), [])

// 搜索框，非受控组件
<Input onChange={(e) => changeDebounce(e)} style={{width: 150, marginRight: 20}}/>

可以看出上面的方式比较适合非受控的组件，如果是受控组件，可以采用 React Hooks 机制来实现：

// 传递给 Input 组件的值
const [value, setValue] = useState('')

// useEffect 钩子函数
useEffect(() => {const getData = setTimeout(() => {if (!value) returninfo('异步请求....')}, 2000)return () => clearTimeout(getData)
}, [value])

// 搜索框，受控组件
<Input value={value} onChange={(e) => setValue(e.target.value)} style={{width: 150, marginRight: 20}}/>

可以看出，使用 useEffect 钩子函数可以很方便的实现防抖功能，原因就在于依赖了 value 值的变化，每次 value 变化后 useEffect 钩子都会执行清除逻辑，也就是 return 返回的函数，重新执行，这样就保证了多次输入内容后，只有到了间隔时间才会执行一次的逻辑。

如果再抽象一点，我们可以把这段逻辑提取成一个自定义 hook：

const useDebounce = <V>(value: V, wait: number) => {const [debounceValue,setDebounceValue] = useState(value)useEffect(() => {const timer = setTimeout(() => setDebounceValue(value),wait)return () => clearTimeout(timer)},[value,wait])return debounceValue
}

在自定义 hook 中，使用了另外一个 state 进行保存和更新状态，只有在间隔时间到了才会更新，然后将这个新的 state 返回出去，在页面上可以这样使用，直接依赖返回出来的状态，这样每次这个状态改变时，就是间隔时间到了的时候，就可以进行异步请求了。

const debounceValue = useDebounce(value,2000)

useEffect(() => {if (!debounceValue) returninfo('异步请求....')
},[debounceValue])

最终的效果如下:

节流函数（Throttle）

上面的图比较好看出来节流函数的应用场景，一般是在滚动屏幕等执行次数很密集的情况下使用，有点限流的意思。

使用 js 实现节流函数

function throttle(fn: any, wait: number) {let inThrottle = falsereturn (...args: any) => {// @ts-ignoreconst context = thisif (!inThrottle) {inThrottle = truefn.apply(context, args)setTimeout(() => {inThrottle = false}, wait)}}
}

节流函数实现的方式就是通过变量来控制是否执行逻辑，这里使用了 inThrottle 这个 boolean 值来进行控制，如果时间没到就一直是 true 的状态，直到时间到了后开始执行逻辑。

下面通过个小例子演示一下没有使用节流函数时，拖动效果：

<div style={{width: 50, height: 50, backgroundColor: 'blue'}} draggable={true} onDrag={() => { info('被拖动了~~~') }}
/>

可以看到，在不试用节流函数的情况下，刚一拖动，就执行了许多许多次，如果这是请求，肯定是能把接口都刷爆的，所以这种情况一定要使用节流函数来控制一下频率，下面是使用了节流函数的效果：

const changeThrottle = useCallback(throttle(() => {info('异步请求....')
}, 2000), [])

<div style={{width: 50, height: 50, backgroundColor: 'blue'}} draggable={true}onDrag={changeThrottle}
/>

加了节流函数后，无论怎样快速拖动，执行的逻辑也是按照间隔时间的频率进行执行的。

在 React 中使用节流函数

我们可以像上面的防抖函数一样，将节流函数也使用 React Hook 来实现：

const useThrottle = <V>(value: V, wait: number) =>{const [throttledValue, setThrottledValue] = useState<V>(value)const lastExecuted = useRef<number>(Date.now())useEffect(() => {if (Date.now() >= lastExecuted.current + wait) {lastExecuted.current = Date.now()setThrottledValue(value)} else {const timerId = setTimeout(() => {lastExecuted.current = Date.now()setThrottledValue(value)}, wait)return () => clearTimeout(timerId)}}, [value, wait])return throttledValue
}

这里主要通过时间对比来控制是否更新 throttledValue，以达到节流的效果，在组件中可以这样使用：

const [value, setValue] = useState(0)
const throttledValue = useThrottle(value, 2000)

useEffect(() => {if (value === 0) returninfo('throttle 异步请求....')
}, [throttledValue])

const handleDrag = () => {setValue(prevState => prevState + 1)
}

<div style={{width: 50, height: 50, backgroundColor: 'blue'}} draggable={true} onDrag={handleDrag}
/>

最终的效果和直接使用 throttle 函数是一样的。

总结

在前端开发中，防抖和节流函数几乎是必备的技能，它们的实现原理都离不开 js 闭包的特性，而在 React 中通过使用自定义的 hook，可以达到一样的效果，有些场景下可能还更方便些，但总的来说本质还是那样。文章来源地址https://www.toymoban.com/news/detail-705718.html