react的hooks防抖和节流是怎样做的

一、先给面试官的"标准定义"（先声夺人）

防抖（debounce） ：在事件触发一段时间后才执行，期间再次触发会重新计时
节流（throttle）：在固定时间内只执行一次

这一句一定要先说。

---

二、为什么在 React Hooks 里要"特别处理"？

问题本质：闭包 + 重新渲染

const fn = () => {
  console.log(count)
}

• 每次 render 都是新函数

• 定时器 / 事件里用的可能是旧状态

👉 普通 JS 防抖在 Hooks 里会失效或拿到旧值

---

三、Hooks 防抖（推荐实现）

1️⃣ 最稳方案：useRef + useCallback

function useDebounceFn(fn, delay = 300) {
  const timer = useRef<number | null>(null)
  const fnRef = useRef(fn)

  // 始终指向最新 fn，解决闭包问题
  fnRef.current = fn

  const debounce = useCallback((...args) => {
    if (timer.current) {
      clearTimeout(timer.current)
    }

    timer.current = window.setTimeout(() => {
      fnRef.current(...args)
    }, delay)
  }, [delay])

  return debounce
}

使用方式

const onSearch = useDebounceFn(value => {
  fetchList(value)
}, 500)

<input onChange={e => onSearch(e.target.value)} />

---

2️⃣ 面试官加分点

使用 useRef 保存最新函数，避免闭包导致状态不更新。

---

四、Hooks 节流（两种方式都要会）

---

方案一：时间戳节流（最稳定）

function useThrottleFn(fn, delay = 300) {
  const lastTime = useRef(0)
  const fnRef = useRef(fn)

  fnRef.current = fn

  return useCallback((...args) => {
    const now = Date.now()

    if (now - lastTime.current >= delay) {
      lastTime.current = now
      fnRef.current(...args)
    }
  }, [delay])
}

---

方案二：定时器节流（常被追问）

function useThrottleFn(fn, delay = 300) {
  const timer = useRef<number | null>(null)
  const fnRef = useRef(fn)

  fnRef.current = fn

  return useCallback((...args) => {
    if (timer.current) return

    timer.current = window.setTimeout(() => {
      fnRef.current(...args)
      timer.current = null
    }, delay)
  }, [delay])
}

---

两种节流的区别（面试官爱问）

方式	特点
时间戳	立即执行
定时器	延迟执行

---

五、为什么不用 lodash debounce？

可以用，但要说清楚限制

const debouncedFn = useMemo(
  () => debounce(fn, 300),
  []
)

❌ 问题：

• fn 变了，debounce 不更新

• 容易产生脏数据

正确用法

const fnRef = useRef(fn)
fnRef.current = fn

const debounced = useMemo(
  () => debounce((...args) => fnRef.current(...args), 300),
  []
)

---

六、Hooks 防抖节流常见坑（必背）

❌ 错误写法

const fn = debounce(() => {
  setCount(count + 1)
}, 300)

问题

• 每次 render 都创建新 debounce

• count 永远是旧值

---

✅ 正确认知

• 防抖节流函数要只创建一次

• 执行的函数要始终是最新的

---

七、什么时候用防抖？什么时候用节流？

防抖（Debounce）

• 搜索框

• 输入联想

• 表单校验

节流（Throttle）

• 滚动

• resize

• 拖拽

---

八、面试终极总结（一定要背）

React Hooks 下实现防抖节流，关键不是 setTimeout，而是用 useRef 解决闭包问题，保证函数引用稳定且状态最新。

---