今天小编给大家分享一下react组件封装input框的防抖怎么处理的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

防抖

防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

项目中有些input框需要做防抖处理，防止每次输入都要发起请求或者做判断，也就是减少触发频率，以便提高性能，避免资源浪费

1.类组件版本

//防抖的方法
const debounceOther = (func, wait = 800) => {
  let timeout; // 定时器变量
  return function () {
    clearTimeout(timeout); // 每次触发时先清除上一次的定时器,然后重新计时
    timeout = setTimeout(() => {
      func(arguments);
    }, wait); // 指定 xx ms 后触发真正想进行的操作 handler
  };
};

在项目中经常会将许多方法或复用性较高的事件封装，然后在页面引入

例：

防抖只需要看下面例子中getInputValue和inputChange即可

这是基于antd封装的一个弹窗组件，在input框 需要判断输入后是否与原有值重复，不做防抖处理则输入一次判断一次

这里是将有封装好的debounceOther函数的js文件直接引入到这个组件中使用了

import { debounceOther } from ".........";
class RelationModal extends Component {
  state = { visible: false, inputErr: '', inputValue: '' };
  getInputValue = debounceOther(() => {
    let { specSelect } = this.props;    //原有数据
    //是否存在相同的
    let index = specSelect.findIndex(item => item.group === this.state.inputValue);
    this.setState({
      inputErr: index === -1 ? "" : '节点名称不允许重复'
    })
  },500)
  //拿到inputValue input输入框有变化500毫秒后 调用防抖方法 
  inputChange = e => {
    this.setState({
      inputValue:e.target.value
    },()=>{
      this.getInputValue()
    }) 
  };
}

2.函数组件版本

useCallback的作用其实是用来避免子组件不必要的reRender

import {useRef,useCallback,useEffect} from 'react'
function useDebounce(fn,delay,setval){
  const {current}=useRef({fn,timer:null})
  useEffect(()=>{
    current.fn=fn
  },[fn])
  return useCallback((e)=>{
    setval(e.target.value)
    if(current.timer){
        clearTimeout(current.timer)
    }
    current.timer=setTimeout(()=>{
        current.fn(e)
    },delay)
  })
}
export default useDebounce

调用

import debounce from '../utils/debounce'
import {useState} from 'react'
function My(){
    let [val,setval]=useState('')
    const inputval=debounce(()=>{
        console.log(val);
    },1000,setval)
    return <div>
       <input type="text" value={val} onChange={(e)=>inputval(e)}/>
    </div>
}
export default My