react組件封裝input框的防抖處理的項目實現(xiàn)
防抖
防抖就是指觸發(fā)事件后在 n 秒內(nèi)函數(shù)只能執(zhí)行一次,如果在 n 秒內(nèi)又觸發(fā)了事件,則會重新計算函數(shù)執(zhí)行時間
項目中有些input框需要做防抖處理,防止每次輸入都要發(fā)起請求或者做判斷,也就是減少觸發(fā)頻率,以便提高性能,避免資源浪費
1.類組件版本
//防抖的方法 const debounceOther = (func, wait = 800) => { let timeout; // 定時器變量 return function () { clearTimeout(timeout); // 每次觸發(fā)時先清除上一次的定時器,然后重新計時 timeout = setTimeout(() => { func(arguments); }, wait); // 指定 xx ms 后觸發(fā)真正想進行的操作 handler }; };
在項目中經(jīng)常會將許多方法或復用性較高的事件封裝,然后在頁面引入
例:
防抖只需要看下面例子中getInputValue和inputChange即可
這是基于antd封裝的一個彈窗組件,在input框 需要判斷輸入后是否與原有值重復,不做防抖處理則輸入一次判斷一次
這里是將有封裝好的debounceOther函數(shù)的js文件直接引入到這個組件中使用了
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é)點名稱不允許重復' }) },500) //拿到inputValue input輸入框有變化500毫秒后 調(diào)用防抖方法 inputChange = e => { this.setState({ inputValue:e.target.value },()=>{ this.getInputValue() }) }; }
2.函數(shù)組件版本
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
調(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框的防抖處理的項目實現(xiàn)的文章就介紹到這了,更多相關react input框防抖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
React?Hooks--useEffect代替常用生命周期函數(shù)方式
這篇文章主要介紹了React?Hooks--useEffect代替常用生命周期函數(shù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09React + Threejs + Swiper 實現(xiàn)全景圖效果的完整代碼
全景圖效果非常漂亮給人帶來極好的用戶體驗效果,那么基于前端開發(fā)如何實現(xiàn)這種效果呢,下面小編給大家?guī)砹薘eact + Threejs + Swiper 實現(xiàn)全景圖效果,感興趣的朋友一起看看吧2021-06-06React利用scheduler思想實現(xiàn)任務的打斷與恢復
這篇文章主要為大家詳細介紹了React如何利用scheduler思想實現(xiàn)任務的打斷與恢復,文中的示例代碼講解詳細,感興趣的小伙伴可以參考一下2024-03-03react-native ListView下拉刷新上拉加載實現(xiàn)代碼
本篇文章主要介紹了react-native ListView下拉刷新上拉加載實現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08react組件的創(chuàng)建與更新實現(xiàn)流程詳解
React組件分為函數(shù)組件與class組件;函數(shù)組件是無狀態(tài)組件,class稱為類組件;函數(shù)組件只有props,沒有自己的私有數(shù)據(jù)和生命周期函數(shù);class組件有自己私有數(shù)據(jù)(this.state)和生命周期函數(shù)2022-10-10