react组件中debounce防抖功能失效问题解决办法
作者：尼古拉斯网页匠
在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防抖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！