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)}/>

我们看下效果是咋样的

我们可以发现：

1. onChange如果感应到了N次。
2. 我们就会输出N次结果。

这显然并不是我们想要的防抖效果。我们希望的是：

1. 假设1秒防抖，那么1秒内我输入框假设输入了10个字符。
2. 假设此时触发了10次onChange事件。
3. 那么在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来包装。