react組件封裝input框的防抖怎么處理

今天小編給大家分享一下react組件封裝input框的防抖怎么處理的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

防抖

防抖就是指觸發(fā)事件后在 n 秒內(nèi)函數(shù)只能執(zhí)行一次，如果在 n 秒內(nèi)又觸發(fā)了事件，則會(huì)重新計(jì)算函數(shù)執(zhí)行時(shí)間

項(xiàng)目中有些input框需要做防抖處理，防止每次輸入都要發(fā)起請(qǐng)求或者做判斷，也就是減少觸發(fā)頻率，以便提高性能，避免資源浪費(fèi)

1.類組件版本

//防抖的方法
const debounceOther = (func, wait = 800) => {
  let timeout; // 定時(shí)器變量
  return function () {
    clearTimeout(timeout); // 每次觸發(fā)時(shí)先清除上一次的定時(shí)器,然后重新計(jì)時(shí)
    timeout = setTimeout(() => {
      func(arguments);
    }, wait); // 指定 xx ms 后觸發(fā)真正想進(jìn)行的操作 handler
  };
};

在項(xiàng)目中經(jīng)常會(huì)將許多方法或復(fù)用性較高的事件封裝，然后在頁面引入

例：

防抖只需要看下面例子中g(shù)etInputValue和inputChange即可

這是基于antd封裝的一個(gè)彈窗組件，在input框 需要判斷輸入后是否與原有值重復(fù)，不做防抖處理則輸入一次判斷一次 

這里是將有封裝好的debounceOther函數(shù)的js文件直接引入到這個(gè)組件中使用了

import { debounceOther } from ".........";
class RelationModal extends Component {
  state = { visible: false, inputErr: '', inputValue: '' };
  getInputValue = debounceOther(() => {
    let { specSelect } = this.props;    //原有數(shù)據(jù)
    //是否存在相同的
    let index = specSelect.findIndex(item => item.group === this.state.inputValue);
    this.setState({
      inputErr: index === -1 ? "" : '節(jié)點(diǎn)名稱不允許重復(fù)'
    })
  },500)
  //拿到inputValue input輸入框有變化500毫秒后 調(diào)用防抖方法 
  inputChange = e => {
    this.setState({
      inputValue:e.target.value
    },()=>{
      this.getInputValue()
    }) 
  };
}

2.函數(shù)組件版本

useCallback的作用其實(shí)是用來避免子組件不必要的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

調(diào)用

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

以上就是“react組件封裝input框的防抖怎么處理”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。