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;
}