React 防抖动（debounce） Hook

防抖动 （debounce）是常见的需求，那么如何搭配 React Hooks 实现防抖动呢，下面演示两种方案。

方案一

副作用防抖

/**
 *
 * @param {React.EffectCallback} fn
 * @param {React.DependencyList} deps
 * @param {number} ms
 */
function useDebouncedEffect(fn, ms, deps) {
  useEffect(() => {
    let clean = null;
    const timer = setTimeout(() => {
      clean = fn();
    }, ms);
    return () => {
      clearTimeout(timer);
      if (clean) clean();
    };
  }, deps);
}

使用方式与 useEffect 一样，只是多了一个参数：

useDebouncedEffect(() => { ... }, 200, [val]);

方案二

/**
 * @template {(...args: any[]) => void} T
 * @param {T} fn
 * @param {React.DependencyList} deps
 * @param {number} ms
 * @returns {T}
 */
function useDebouncedCallback(fn, ms, deps) {
  const timerRef = useRef(null);
  const funcRef = useRef(null);

  useEffect(() => {
    return () => {
      clearTimeout(timerRef.current);
      funcRef.current = null;
    };
  }, []);

  return useMemo(() => {
    funcRef.current = fn;
    return function (...args) {
      clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => funcRef.current(...args), ms);
    };
  }, deps);
}

使用方式与 useCallback 一样，只是多了一个参数：

const func = useDebouncedCallback((...args) => { ... }, 200, [val]);

总结

上面演示了两种应用 React Hooks 实现防抖（debounce）的方法，实际应用过程中可能还需考虑组件 unmount 时的边界情况，酌情使用。