react组件中debounce防抖功能失效问题解决办法

更新时间：2024年10月12日 10:16:58 作者：尼古拉斯网页匠

在React组件中,如果使用useState管理searchKey,每次输入变化都会导致组件重新渲染,从而生成新的debounce函数,导致防抖功能失效,解决方法是使用useRef定义searchKey为非响应式数据,从而维持debounce函数的稳定,确保防抖功能有效,感兴趣的朋友跟随小编一起看看吧

一、问题背景

import { debounce } from 'lodash';  
const [searchKey, setSearchKey] = useState('');
// 防抖函数
  const debounceList = debounce(getList, 500);

<Input
   value={searchKey}
   onChange={(e) => {
              setSearchKey(e.target.value);
             }}
   className={`${style.search}`}
   placeholder="请输入关键词"
/>

页面上有一个搜索框，searchKey是通过useState定义的响应式数据，onChange事件调用了setSearchKey方法，那么只要输入变化时，组件就会重新渲染从而重新生成新的防抖函数debounceList。最终造成防抖功能失效。

二、解决办法

使用 useRef 定义searchKey数据，使其成为非响应式数据，通过 searchKey.current 获取和修改值：

// 搜索关键字
  const searchKey = useRef('');
// 修改数据
const setSearchKey = (val) => {
    searchKey.current = val;
  };

<Input
   onChange={(e) => {
              setSearchKey(e.target.value);
             }}
   className={`${style.search}`}
   placeholder="请输入关键词"
/>

三、拓展

关于处理防抖失效的问题，可能有人会想到使用 useCallback 来缓存 debounce 防抖函数，比如你可能会这样写：

const [searchKey, setSearchKey] = useState('');
const debounceList = useCallback(debounce(getList, 500), []);

这样防抖功能虽然生效了，但是你无法获取最新的searchKey值；如果想获取最新的searchKey值，就要把searchKey加到后面的 [ ] 中，但是这样防抖又失效了。所以只能采用useRef 定义非响应式数据来解决。

到此这篇关于react组件中debounce防抖功能失效的文章就介绍到这了,更多相关react组件debounce防抖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React中映射一个嵌套数组实现demo
这篇文章主要为大家介绍了React中映射一个嵌套数组实现demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
React新文档切记不要滥用effect
这篇文章主要为大家介绍了React新文档滥用effect出现的问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
关于 React 中 useEffect 使用问题浅谈
本文主要介绍了关于React中useEffect使用问题浅谈，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
React组件中使用JSON数据文件的方法详解
要在 React 组件中使用 JSON 数据,有多种方法,这篇文章主要为大家详细介绍了五个常见的方法,文中的示例代码讲解详细,有需要的小伙伴可以了解下
2024-01-01
在Create React App中使用CSS Modules的方法示例
本文介绍了如何在 Create React App 脚手架中使用 CSS Modules 的两种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
2019-01-01
React项目中不需要jQuery原因分析
在Web开发的早期,jQuery是一个革命性的库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax请求等任务,React的出现,jQuery在新项目中的必要性开始受到质疑,本文将探讨为什么在React应用中不需要jQuery,感兴趣的朋友可以参考下
2024-02-02
React 非父子组件传参的实例代码
React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。本文给大家介绍React 非父子组件传参的相关知识，感兴趣的朋友跟随一起看看吧
2021-04-04
React从插槽、路由、redux的详细过程
React需要自己开发支持插槽功能，原理：父组件组件中写入的HTML，可以传入子组件的props中，这篇文章主要介绍了React从插槽、路由、redux的详细过程,需要的朋友可以参考下
2022-10-10
React手写redux过程分步讲解
这篇文章主要介绍了React手写redux过程，目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下
2022-12-12
详解一个基于react+webpack的多页面应用配置
这篇文章主要介绍了详解一个基于react+webpack的多页面应用配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01