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);
  }}
/>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用 `useCallback` 和 `useEffect` 来实现 React Hooks 防抖。 首先,我们需要使用 `useCallback` 来缓存一个函数,这个函数可以是我们需要防抖的函数。然后,我们在 `useEffect` 中监听这个函数依赖的变量,如果这个变量发生了变化,我们就会重新缓存这个函数,从而实现防抖的效果。 下面是一个示例代码: ``` import React, { useState, useCallback, useEffect } from 'react'; function DebouncedInput() { const [value, setValue] = useState(''); const handleInputChange = useCallback((event) => { setValue(event.target.value); }, []); const debouncedHandleInputChange = useCallback( debounce(handleInputChange, 500), [handleInputChange] ); useEffect(() => { return () => { debouncedHandleInputChange.cancel(); }; }, [debouncedHandleInputChange]); return ( <input type="text" value={value} onChange={debouncedHandleInputChange} /> ); } function debounce(func, delay) { let timeoutId; const debounced = (...args) => { clearTimeout(timeoutId); timeoutId = setTimeout(() => { func(...args); }, delay); }; debounced.cancel = () => { clearTimeout(timeoutId); }; return debounced; } ``` 在上面的代码中,`debounce` 函数是一个通用的防抖函数,它接受一个函数和一个延迟时间作为参数,并返回一个新的函数,这个新函数会在延迟时间内只执行一次原来的函数。我们把 `handleInputChange` 函数作为参数传给 `debounce` 函数,得到一个新的函数 `debouncedHandleInputChange`,它就是我们需要防抖的函数。 在 `useEffect` 中,我们监听 `debouncedHandleInputChange` 函数的依赖变量 `handleInputChange`,如果这个变量发生了变化,就会重新缓存 `debouncedHandleInputChange` 函数。在组件卸载时,我们需要调用 `debouncedHandleInputChange.cancel()` 来取消防抖函数的执行。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值