React 防抖 Hook: useDebounce 实现原理详解

import { useEffect, useCallback, useRef } from 'react';

function useDebounce(fn, delay) {
    let { current } = useRef({ fn, timer: null });
    useEffect(() => {
        current.fn = fn;
    }, [current, fn])
    return useCallback(function f(...args) {
        if (current.timer) {
            clearTimeout(current.timer);
        }
        current.timer = setTimeout(() => {
            current.fn.call(this, ...args);
        }, delay)
    }, [current, delay])
}

export default useDebounce;

代码解释:

该代码实现了一个 React 防抖 Hook: useDebounce。它接受两个参数:

fn: 要防抖的函数
delay: 防抖时间 (毫秒)

实现原理:

使用 useRef 存储一个对象，包含要防抖的函数 (fn) 和一个计时器 (timer)。
使用 useEffect 确保每次 fn 更新时，current.fn 也同步更新。
使用 useCallback 返回一个防抖函数，该函数内部通过 setTimeout 延迟执行 fn 函数。
当调用防抖函数时，它会先清除之前的计时器，然后设置新的计时器，保证在 delay 时间内，fn 函数只会执行一次。

...args 参数解释:

...args 是 JavaScript 中的剩余参数，它允许函数接收任意数量的参数并将其作为数组传入。

在本代码中，...args 用于将传递给防抖函数的任何参数都作为数组传入到 fn 函数中。这确保了防抖函数可以接收任何数量和类型的参数，并将它们正确地传递给原始函数。

总结:

useDebounce Hook 是一种常见的 React 防抖实现方式，可以有效地减少事件触发频率，提高应用性能。代码中使用了 useRef、useEffect 和 useCallback 这几个 Hook，并利用了 ...args 剩余参数，展现了 React 中 Hook 的灵活性和强大功能。