react實現自定義hooks（節流和防抖）

實現思路

自定義hooks+setTimeout組合，基本實現很簡單，只要理解了節流和防抖是什么就很容易實現了。防抖和節流都是對高頻觸發的事件來做的一種應對手段，我認為它們最本質的區別是是否需要對最終的結果負責，比如防抖的目的即是為了拿到最終的結果，所以前面不管觸發多少次，我們都可以不管，只等到它不再觸發了才做最后的處理。而節流是對相同事件的觸發頻率的控制，它觸發的次數不會造成不同的結果。

在線預覽

https://codesandbox.io/s/usehooks-vki3p

核心代碼

useThrottle

import { useCallback, useRef } from "react";

export default function useThrottle(fn, delay) {
  const timer = useRef(-1);
  const throttle = useCallback(() => {
    if (timer.current > -1) {
      return;
    }
    timer.current = setTimeout(() => {
      fn();
      timer.current = -1;
      clearTimeout(timer.current);
    }, delay);
  }, [fn, delay]);
  return throttle;
}

useDebounce

import { useEffect, useState } from "react";

export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  return debouncedValue;
}