React事件节流效果失效的原因及解决
作者：Cleves
这篇文章主要介绍了React事件节流效果失效的原因及解决，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
今天做react项目中，给一个 input onKeyDown 事件做节流，出现了节流效果失效。
问题代码：
render() {
return (
<div className="search-bar">
<input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.throttle(this.handleKeyDown)}/>
</div>
)
}
throttle = (fn) => {
let valid = true
const context = this
return function() {
if (!valid) return
valid = false
const args = arguments
fn.apply(context, args)
setTimeout(() => {
valid = true
}, 1000);
}
}
handleKeyDown = (e) => {
let { value } = e.target
const keyCode = e.keyCode
if (keyCode !== 13) return
if (!value.trim()) return
// 发送搜索
this.props.search(value)
}
此处问题出现在：
handleKeyDown() 方法里的 this.props.search(value)
刷新了组件 props，触发了 react 更新流生命周期。 重新执行了 render()；
这样 throttle() 方法就会重新执行;
throttle = (fn) => {
console.log('%c throttle初始化', 'color: red');
let valid = true
const context = this
return function() {
if (!valid) return
valid = false
const args = arguments
fn.apply(context, args)
setTimeout(() => {
valid = true
}, 1000);
}
}
在代码中加入打印，就会在控制台看到 throttle初始化 打印多条;
解决方式1：
把节流初始化的位置放到 事件函数赋值
render() {
return (
<div className="search-bar">
<input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.handleKeyDown}/>
</div>
)
}
handleKeyDown = this.throttle((e) => {
let { value } = e.target
const keyCode = e.keyCode
if (keyCode !== 13) return
if (!value.trim()) return
// 发送搜索
this.props.search(value)
})
解决方式2： 在构造函数中赋值初始化
render() {
return (
<div className="search-bar">
<input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.handleKeyDown}/>
</div>
)
}
constructor(props) {
super(props)
this.handleKeyDown = this.throttle(this.handleSearch)
}
handleSearch = (e) => {
let { value } = e.target
const keyCode = e.keyCode
if (keyCode !== 13) return
if (!value.trim()) return
// 发送搜索
this.props.search(value)
}
采坑总结：
要更加深了解 react 生命周期的触发机制
以上就是React事件节流效果失效的原因及解决的详细内容，更多关于React事件节流效果失效的资料请关注脚本之家其它相关文章！