正文

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

︶ㄣ速达网 メ
米米素材网V管理员 / 阅读
0702

这篇文章主要介绍了React事件节流效果失效的原因及解决，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下

今天做react项目中，给一个 input onKeyDown 事件做节流，出现了节流效果失效。

问题代码：

?
1
2
3
4
5
6
7
render() {
    return (
      <div className="search-bar">
        <input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.throttle(this.handleKeyDown)}/>
      </div>
    )
  }
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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()；

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

这样 throttle() 方法就会重新执行; 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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： 

把节流初始化的位置放到 事件函数赋值

?
1
2
3
4
5
6
7
render() {
    return (
      <div className="search-bar">
        <input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.handleKeyDown}/>
      </div>
    )
  }
?
1
2
3
4
5
6
7
8
9
10
11
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： 在构造函数中赋值初始化

?
1
2
3
4
5
6
7
render() {
    return (
      <div className="search-bar">
        <input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.handleKeyDown}/>
      </div>
    )
  }
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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事件节流效果失效的资料请关注米米素材网其它相关文章！

原文链接：https://www.cnblogs.com/cleves/p/14663672.html