React中使用lodash防抖失效解决

React中使用lodash防抖失效解决

import {Input} from 'antd';
import lodash from 'lodash';
// lodash下的防抖函数
const debounce = lodash.debounce;
// 防抖打印，希望输入的时候，延迟0.5s后打印值
const getSuggestion = debounce((val:string) => {
    console.log(val);
  }, 500);
// antd的一个简单搜索文本框
const { Search } = Input;
<Search  onChange={event => getSuggestion(event.target.value)}/>

 

我们可以发现：

onChange如果感应到了N次。
我们就会输出N次结果。
这显然并不是我们想要的防抖效果。我们希望的是：

假设1秒防抖，那么1秒内我输入框假设输入了10个字符。
假设此时触发了10次onChange事件。
那么在1秒后，只会输出一次结果。而不是10次。
为啥会这样呢？因为以案例为例，每次onChange的事件，相当于重新创建了个debounce防抖函数。因此我onChange事件触发10次，就会有10个防抖函数并执行。

解决：利用useCallback。

import React, { useCallback } from 'react';

const getSuggestion = useCallback(debounce((val:string) => {
    console.log(val);  
}, 1000), []);

useCallback的作用也显而易见，咱们用通俗的话来说就是缓存了这个函数，避免被重复创建。

因此，希望大家不要踩坑。在遇到类似场景，React中使用防抖并且失效的时候，可以用useCallback来包装。