React hooks 防抖改良版

原创

于 2021-09-05 14:08:59 发布 · 333 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #reactjs

本文介绍了如何在React Hooks项目中实现防抖(debounce)功能，通过一个名为useDebounce的自定义Hook，避免频繁调用函数。作者遇到在经典防抖实现与React Hooks不兼容的问题后，结合React Hooks的知识和知乎上的资料，成功解决了问题。示例代码展示了如何在登录功能中应用这个防抖Hook，确保用户输入稳定后再执行登录请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前阵子在打游戏，突然想起来前端貌似是有什么防抖、节流，就百度了一下，看了一眼没看懂，过了好久才又想起来，遂照着别人的代码码了一下。
参考：

经典防抖：人类高质量JS防抖与节流机制
hooks防抖：React hooks 怎样做防抖？

因为我用的react hooks写的项目，看完经典防抖直接就去试了一下，发现不行，感觉是因为react hooks的特性引发的问题，又去找了一篇react hooks有关的知乎，二者结合了一下，成功。

核心debounce.js文件:

import {
   
    useCallback, useEffect, useRef } from "react"

function useDebounce(fn, delay, dep = []) {
   
   
	// useRef 可以跨周期保存数据，不会因重新渲染而被重置，这样定时器就有效了
	// 只有单击和连击的最后一次会生效
  const {
   
    current } = useRef({
   
    fn, time: null, firsttime: true })
  useEffect(function