• 售前

  • 售后

热门帖子
入门百科

React变乱节省结果失效的缘故原由及解决

[复制链接]
无将大车 显示全部楼层 发表于 2021-10-26 13:16:46 |阅读模式 打印 上一主题 下一主题
目次


  • 此处问题出现在:
  • 办理方式1:
  • 办理方式2: 在构造函数中赋值初始化
  • 采坑总结:
本日做react项目中,给一个 input onKeyDown 事故做节流,出现了节流结果失效。
问题代码:
  1. render() {
  2.     return (
  3.       <div className="search-bar">
  4.         <input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.throttle(this.handleKeyDown)}/>
  5.       </div>
  6.     )
  7.   }
复制代码
  1. throttle = (fn) => {
  2.     let valid = true
  3.     const context = this
  4.     return function() {
  5.       if (!valid) return
  6.       valid = false
  7.       const args = arguments
  8.       fn.apply(context, args)
  9.       setTimeout(() => {
  10.         valid = true
  11.       }, 1000);
  12.     }
  13.   }
  14.   handleKeyDown = (e) => {
  15.     let { value } = e.target
  16.     const keyCode = e.keyCode
  17.     if (keyCode !== 13) return
  18.     if (!value.trim()) return
  19.    
  20.     // 发送搜索
  21.     this.props.search(value)
  22.   }
复制代码
此处问题出现在:

handleKeyDown() 方法里的  this.props.search(value)
革新了组件 props,触发了 react 更新流生命周期。 重新实行了 render();

这样 throttle() 方法就会重新实行;
  1. throttle = (fn) => {
  2.     console.log('%c throttle初始化', 'color: red');
  3.     let valid = true
  4.     const context = this
  5.     return function() {
  6.       if (!valid) return
  7.       valid = false
  8.       const args = arguments
  9.       fn.apply(context, args)
  10.       setTimeout(() => {
  11.         valid = true
  12.       }, 1000);
  13.     }
  14.   }
复制代码
在代码中加入打印,就会在控制台看到 throttle初始化 打印多条;                                                                                                                                                            

办理方式1:

把节流初始化的位置放到 事故函数赋值
  1. render() {
  2.     return (
  3.       <div className="search-bar">
  4.         <input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.handleKeyDown}/>
  5.       </div>
  6.     )
  7.   }
复制代码
  1. handleKeyDown = this.throttle((e) => {
  2.     let { value } = e.target
  3.     const keyCode = e.keyCode
  4.     if (keyCode !== 13) return
  5.     if (!value.trim()) return
  6.    
  7.     // 发送搜索
  8.     this.props.search(value)
  9.   })
复制代码
办理方式2: 在构造函数中赋值初始化
  1. render() {
  2.     return (
  3.       <div className="search-bar">
  4.         <input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.handleKeyDown}/>
  5.       </div>
  6.     )
  7.   }
复制代码
  1. constructor(props) {
  2.     super(props)
  3.     this.handleKeyDown = this.throttle(this.handleSearch)
  4.   }
  5.   handleSearch = (e) => {
  6.     let { value } = e.target
  7.     const keyCode = e.keyCode
  8.     if (keyCode !== 13) return
  9.     if (!value.trim()) return
  10.    
  11.     // 发送搜索
  12.     this.props.search(value)
  13.   }
复制代码
采坑总结:

要更加深了解 react 生命周期的触发机制
以上就是React事故节流结果失效的原因及办理的详细内容,更多关于React事故节流结果失效的资料请关注草根技术分享别的相关文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作