react使用防抖

需求：搜索栏中输入内容是，之前是每键入一次就会请求后台一次，这样会影响性能，所以需要优化，使用useDebounce来实现防抖

先引入useDebounce

import { useDebounce } from 'react-use';

因为我们这里是在搜索框中使用防抖，所以我们定义一个变量来存我们搜索框中键入的数据

const [debounceValue, setDebounceValue] = useState(null);
const [debounceMembers, setDebounceMembers] = useState(null);

在防抖中，每500ms我就会执行一次getTenantProductMenager方法，当debounceValue发生改变的时候

useDebounce(() => {
    getTenantProductMenager(debounceValue);
  }, 500, [debounceValue]);

  useDebounce(() => {
    getTenantMembers(debounceMembers);
  }, 500, [debounceMembers]);

当我不是搜索框中输入的时候，那么我getTenantProductMenager(null)

const getTenantProductMenager = useCallback(
    (keyword: string | null) => {
      setLoadingUsers(true);
      dispatch({
        type: 'xxx/xxxx', // 接口请求路径
        payload: { // 接口请求携带的参数
          tenantId: value.useProduct.tenantId,
          productId: value.useProduct.productId,
          keyword,
        },
        callback: () => {
          setLoadingUsers(false);
          dispatch({
            type: 'tenant/save', // 使用react-redux来保存接口数据
          });
        },
      });
    },
    [dispatch, value.useProduct.productId, value.useProduct.tenantId]
  );
  useEffect(() => {
    getTenantProductMenager(null);
  }, [getTenantProductMenager, value]);

搜索框,如果我每次键入的时候，我就会在setDebounceMembers存一次键入的内容，因为我是根据debounceMembers变化来调用getTenantProductMenager方法，所以这边只要在setDebounceMembers存就行了

<Input
  placeholder="搜索"
  style={{
    background: '#F3F3F5',
    borderRadius: 15,
    height: 30,
    width: 200,
    marginRight: 16,
  }}
  onChange={(e: any) => {
    setDebounceMembers(e.target.value);
  }}
/>