欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react組件封裝input框的防抖處理的項(xiàng)目實(shí)現(xiàn)

 更新時(shí)間:2023年04月27日 10:58:35   作者:Leslie21.  
本文主要介紹了react組件封裝input框的防抖處理的項(xiàng)目實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

防抖

防抖就是指觸發(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.類(lèi)組件版本

//防抖的方法
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ù)用性較高的事件封裝,然后在頁(yè)面引入

例:

防抖只需要看下面例子中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)名稱(chēng)不允許重復(fù)'
    })
  },500)
  //拿到inputValue input輸入框有變化500毫秒后 調(diào)用防抖方法 
  inputChange = e => {
    this.setState({
      inputValue:e.target.value
    },()=>{
      this.getInputValue()
    }) 
  };
}

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

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

到此這篇關(guān)于react組件封裝input框的防抖處理的項(xiàng)目實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)react input框防抖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React?Hooks--useEffect代替常用生命周期函數(shù)方式

    React?Hooks--useEffect代替常用生命周期函數(shù)方式

    這篇文章主要介紹了React?Hooks--useEffect代替常用生命周期函數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • React + Threejs + Swiper 實(shí)現(xiàn)全景圖效果的完整代碼

    React + Threejs + Swiper 實(shí)現(xiàn)全景圖效果的完整代碼

    全景圖效果非常漂亮給人帶來(lái)極好的用戶(hù)體驗(yàn)效果,那么基于前端開(kāi)發(fā)如何實(shí)現(xiàn)這種效果呢,下面小編給大家?guī)?lái)了React + Threejs + Swiper 實(shí)現(xiàn)全景圖效果,感興趣的朋友一起看看吧
    2021-06-06
  • React利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù)

    React利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù)

    這篇文章主要為大家詳細(xì)介紹了React如何利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下
    2024-03-03
  • react-router-dom?V6的配置使用實(shí)踐

    react-router-dom?V6的配置使用實(shí)踐

    本文主要介紹了react-router-dom?V6的配置使用實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • React中的refs的使用教程

    React中的refs的使用教程

    本篇文章主要介紹了React中的refs的使用教程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • 十分鐘帶你快速了解React16新特性

    十分鐘帶你快速了解React16新特性

    這篇文章主要介紹了十分鐘帶你快速了解React16新特性,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-11-11
  • react native 仿微信聊天室實(shí)例代碼

    react native 仿微信聊天室實(shí)例代碼

    這篇文章主要介紹了react native 仿微信聊天室實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-09-09
  • 無(wú)廢話快速上手React路由開(kāi)發(fā)

    無(wú)廢話快速上手React路由開(kāi)發(fā)

    本文以簡(jiǎn)潔為目標(biāo),幫助快速上手react-router-dom默認(rèn)你接觸過(guò)路由相關(guān)的開(kāi)發(fā),通過(guò)實(shí)例代碼講解的很詳細(xì),對(duì)React路由相關(guān)知識(shí)感興趣的朋友一起看看吧
    2021-05-05
  • react-native ListView下拉刷新上拉加載實(shí)現(xiàn)代碼

    react-native ListView下拉刷新上拉加載實(shí)現(xiàn)代碼

    本篇文章主要介紹了react-native ListView下拉刷新上拉加載實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • react組件的創(chuàng)建與更新實(shí)現(xiàn)流程詳解

    react組件的創(chuàng)建與更新實(shí)現(xiàn)流程詳解

    React組件分為函數(shù)組件與class組件;函數(shù)組件是無(wú)狀態(tài)組件,class稱(chēng)為類(lèi)組件;函數(shù)組件只有props,沒(méi)有自己的私有數(shù)據(jù)和生命周期函數(shù);class組件有自己私有數(shù)據(jù)(this.state)和生命周期函數(shù)
    2022-10-10

最新評(píng)論