react hooks 防抖函数

系统管理员 2022-11-24 14:29 176阅读 0赞

防抖的意思就是用户输入的时候不会频繁请求接口，一旦用户停下来在设定的时间内都没有再输入，那就可以发送请求，所以这样就减少了请求

防抖这个用hooks有点小麻烦，主要是要获取input传入的参数

event.persist(),这个是要加上的，不然会报一个警告，如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70][]

翻译一下就是：由于性能原因，此综合事件被重用。如果您看到此消息，那么您正在访问已发布/无效的合成事件上的属性“ target”。设置为空。如果必须保留原始的合成事件，请使用event.persist（）

import React, { useState, useEffect, useRef, useCallback } from 'react';
    
    
    export default () => {
      const [inputValue, setInputValue] = useState('')
      
      // 防抖函数
      function useDebounce(fn, delay) {
        const { current } = useRef({ fn, timer: null });
        useEffect(function () {
          current.fn = fn;
        }, [fn]);
      
        return useCallback(function f(...args) {
          args[0].persist() // 这里需要这样设置是因为会警告
          // console.log('')
          setInputValue(args[0].target.value)  // 这里需要setState一下，不然，得不到value
          if (current.timer) {
            clearTimeout(current.timer);
          }
          current.timer = setTimeout(() => {
            current.fn.call(this, ...args);
          }, delay);
        })
      }
      
      const handleValue = useDebounce(v => { // 获取input的值
        const value = v.target.value
        console.log({value})
      }, 800)
     
      // console.log({botlist})
      return <div className='bot-content'>
        <div className='input-bot'>
          <Input className='input-left' value={inputValue} placeholder='请输入回复内容' onChange={v => handleValue(v)} />
        </div>
      </div>
    }

看一下效果，前面是时间戳：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70 1][]

欢迎大家关注我的公众号： 石马上coding，一起成长  
![石马上coding][coding]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70]: /images/20221124/06eb9562ef9b47b3a0689dd011ddcb0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70 1]: /images/20221124/6f5ad212c3694a61a70a66d0b7adb033.png
[coding]: /images/20221124/7926709894514f32a854a70811cc9396.png