react hooks 防抖函数

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

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

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

 

 

翻译一下就是：由于性能原因，此综合事件被重用。如果您看到此消息，那么您正在访问已发布/无效的合成事件上的属性“ 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>
}

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

 

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