JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

React事件节流效果失效的原因及解决

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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)
  }

此处问题出现在：&nbsp;

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事件节流效果失效的资料请关注脚本宝典其它相关文章！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的React事件节流效果失效的原因及解决全部内容，希望文章能够帮你解决React事件节流效果失效的原因及解决所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：React
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程