React事件节流失效是怎么回事？怎样解决？
发布时间：2022-01-11 16:45:07 所属栏目：语言 来源：互联网
导读：本文给大家分享的是React项目中出现事件节流效果失效的解决方法，本文会介绍React事件节流失效的原因及两种解决方式，有需要的朋友可以参考了解看看，下面我们就来看一下示例吧。 今天做react项目中，给一个 input onKeyDown 事件做节流，出现了节流效果失效
|
本文给大家分享的是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) } （编辑：91站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
