我要评论一、问题背景
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防抖内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论