react组件封装input框的防抖处理的项目实现
作者：Leslie21.
本文主要介绍了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到此这篇关于react组件封装input框的防抖处理的项目实现的文章就介绍到这了,更多相关react input框防抖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！