[JavaScript知识库]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;
    let 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);
  useEffect(() => {
  	clearTimeout(timerRef.current);
  }, []);
  return useCallback(function(...args) {
   	clearTimeout(timerRef.current);
   	timerRef.current = setTimeout(fn.bind(this, ...args), ms);
  }, deps);
}

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

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

总结

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