快捷導(dǎo)航

React事件節(jié)流效果失效的原因及解決

更新時(shí)間：2021年04月19日 11:00:59 作者：Cleves

這篇文章主要介紹了React事件節(jié)流效果失效的原因及解決，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下

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
    
    // 發(fā)送搜索
    this.props.search(value)
  }

此處問(wèn)題出現(xiàn)在：

handleKeyDown() 方法里的 this.props.search(value)
刷新了組件 props，觸發(fā)了 react 更新流生命周期。重新執(zhí)行了 render()；

這樣 throttle() 方法就會(huì)重新執(zhí)行;

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);
    }
  }

在代碼中加入打印，就會(huì)在控制臺(tái)看到 throttle初始化打印多條;

解決方式1：

把節(jié)流初始化的位置放到事件函數(shù)賦值

render() {
    return (
      <div className="search-bar">
        <input className="search-input" type="text" placeholder="請(qǐng)輸入要搜索的用戶名(英文)" onKeyDown={this.handleKeyDown}/>
      </div>
    )
  }

handleKeyDown = this.throttle((e) => {
    let { value } = e.target
    const keyCode = e.keyCode

    if (keyCode !== 13) return

    if (!value.trim()) return
    
    // 發(fā)送搜索
    this.props.search(value)
  })

解決方式2：在構(gòu)造函數(shù)中賦值初始化

render() {
    return (
      <div className="search-bar">
        <input className="search-input" type="text" placeholder="請(qǐng)輸入要搜索的用戶名(英文)" 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
    
    // 發(fā)送搜索
    this.props.search(value)
  }