【进阶 7-3 期】[译] Throttle 和 Debounce 在 React 中的应用

时间  2019-11-07
标签 进阶 7-3 期 throttle debounce react 应用 栏目 React 繁體版
原文   原文链接

更新：谢谢你们的支持，最近折腾了一个博客官网出来，方便你们系统阅读，后续会有更多内容和更多优化，猛戳这里查看css

------ 如下是正文 ------前端

原文 Improve Your React App Performance by Using Throttling and Debouncingreact

引言

使用 React 构建应用程序时，咱们老是会遇到一些限制问题，好比大量的调用、异步网络请求和 DOM 更新等，咱们可使用 React 提供的功能来检查这些。git

  • shouldComponentUpdate(...) 生命周期钩子
  • React.PureComponent
  • React.memo
  • Windowing and Virtualization
  • Memoization
  • Hydration
  • Hooks (useState, useMemo, useContext, useReducer, 等)

在这篇文章中，咱们将研究如何在不使用 React 提供的功能下来改进 React 应用程序性能，咱们将使用一种不只仅适用于 React 的技术：节流（Throttle）和防抖（Debounce）。github

从一个例子开始

例子 1

下面这个例子能够很好的解释节流和防抖带给咱们的好处，假设咱们有一个 autocomp 组件面试

import React from 'react';
import './autocomp.css';
复制代码
class autocomp extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            results: []
        }
    }
复制代码
handleInput = evt => {
        const value = evt.target.value
        fetch(`/api/users`)
            .then(res => res.json())
            .then(result => this.setState({ results: result.users }))
    }
复制代码
render() {
        let { results } = this.state;
        return (
            <div className='autocomp_wrapper'> <input placeholder="Enter your search.." onChange={this.handleInput} /> <div> {results.map(item=>{item})} </div> </div> ); } } export default autocomp; 复制代码

在咱们的 autocomp 组件中，一旦咱们在输入框中输入一个单词，它就会请求 api/users 获取要显示的用户列表。 在每一个字母输入后，触发异步网络请求，而且成功后经过 this.setState 更新DOM。数据库

如今，想象一下输入 fidudusola 尝试搜索结果 fidudusolanke，将有许多名称与 fidudusola 一块儿出现。npm

1.  f
2.  fi
3.  fid
4.  fidu
5.  fidud
6.  fidudu
7.  fidudus
8.  fiduduso
9.  fidudusol
10. fidudusola
复制代码

这个名字有 10 个字母，因此咱们将有 10 次 API 请求和 10 次 DOM 更新，这只是一个用户而已!! 输入完成后最终看到咱们预期的名字 fidudusolanke 和其余结果一块儿出现。json

即便 autocomp 能够在没有网络请求的状况下完成（例如，内存中有一个本地“数据库”），仍然须要为输入的每一个字符/单词进行昂贵的 DOM 更新。api

const data = [
    {
        name: 'nnamdi'
    },
    {
        name: 'fidudusola'
    },
    {
        name: 'fashola'
    },
    {
        name: 'fidudusolanke'
    },
    // ... up to 10,000 records
]
复制代码
class autocomp extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            results: []
        }
    }
复制代码
handleInput = evt => {
        const value = evt.target.value
        const filteredRes = data.filter((item)=> {
            // algorithm to search through the `data` array
        })
        this.setState({ results: filteredRes })
    }
复制代码
render() {
        let { results } = this.state;
        return (
            <div className='autocomp_wrapper'> <input placeholder="Enter your search.." onChange={this.handleInput} /> <div> {results.map(result=>{result})} </div> </div> ); } } 复制代码

例子 2

另外一个例子是使用 resize 和 scroll 等事件。大多数状况下，网站每秒滚动 1000 次，想象一下在 scroll 事件中添加一个事件处理。

document.body.addEventListener('scroll', ()=> {
    console.log('Scrolled !!!')
})
复制代码

你会发现这个函数每秒被执行 1000 次！若是这个事件处理函数执行大量计算或大量 DOM 操做，将面临最坏的状况。

function longOp(ms) {
    var now = Date.now()
    var end = now + ms
    while(now < end) {
        now = Date.now()
    }
}
复制代码
document.body.addEventListener('scroll', ()=> {
    // simulating a heavy operation
    longOp(9000)
    console.log('Scrolled !!!')
})
复制代码

咱们有一个须要 9 秒才能完成的操做，最后输出 Scrolled !!!，假设咱们滚动 5000 像素会有 200 多个事件被触发。 所以，须要 9 秒才能完成一次的事件，大约须要 9 * 200 = 1800s 来运行所有的 200 个事件。 所以，所有完成须要 30 分钟（半小时）。

因此确定会发现一个滞后且无响应的浏览器，所以编写的事件处理函数最好在较短的时间内执行完成。

咱们发现这会在咱们的应用程序中产生巨大的性能瓶颈，咱们不须要在输入的每一个字母上执行 API 请求和 DOM 更新，咱们须要等到用户中止输入或者输入一段时间以后，等到用户中止滚动或者滚动一段时间以后，再去执行事件处理函数。

全部这些确保咱们的应用程序有良好性能，让咱们看看如何使用节流和防抖来避免这种性能瓶颈。

节流 Throttle

节流强制一个函数在一段时间内能够调用的最大次数，例如每 100 毫秒最多执行一次函数。

节流是指在指定的时间内执行一次给定的函数。这限制了函数被调用的次数，因此重复的函数调用不会重置任何数据。

假设咱们一般以 1000 次 / 20 秒的速度调用函数。 若是咱们使用节流将它限制为每 500 毫秒执行一次，咱们会看到函数在 20 秒内将执行 40 次。

1000 * 20 secs = 20,000ms
20,000ms / 500ms = 40 times
复制代码

这是从 1000 次到 40 次的极大优化。

下面将介绍在 React 中使用节流的例子，将分别使用 underscore 、 lodash 、RxJS 以及自定义实现。

使用 underscore

咱们将使用 underscore 提供的节流函数处理咱们的 autocomp 组件。

先安装依赖。

npm i underscore
复制代码

而后在组件中导入它：

// ...
import * as _ from underscore;
复制代码
class autocomp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            results: []
        }
       this.handleInputThrottled = _.throttle(this.handleInput, 1000)
    }
复制代码
handleInput = evt => {
        const value = evt.target.value
        const filteredRes = data.filter((item)=> {
            // algorithm to search through the `data` array
        })
        this.setState({ results: filteredRes })
    }
复制代码
render() {
        let { results } = this.state;
        return (
            <div className='autocomp_wrapper'> <input placeholder="Enter your search.." onChange={this.handleInputThrottled} /> <div> {results.map(result=>{result})} </div> </div> ); } } 复制代码

节流函数接收两个参数，分别是须要被限制的函数和时间差，返回一个节流处理后的函数。 在咱们的例子中，handleInput 方法被传递给 throttle 函数，时间差为 1000ms。

如今，假设咱们以每 200ms 1 个字母的正常速度输入 fidudusola，输入完成须要10 * 200ms =（2000ms）2s，这时 handleInput 方法将只调用 2（2000ms / 1000ms = 2）次而不是最初的 10 次。

使用 lodash

lodash 也提供了一个 throttle 函数，咱们能够在 JS 程序中使用它。

首先，咱们须要安装依赖。

npm i lodash
复制代码

使用 lodash，咱们的 autocomp 将是这样的。

// ...
import { throttle } from lodash;
复制代码
class autocomp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            results: []
        }
       this.handleInputThrottled = throttle(this.handleInput, 100)
    }
复制代码
handleInput = evt => {
        const value = evt.target.value
        const filteredRes = data.filter((item)=> {
            // algorithm to search through the `data` array
        })
        this.setState({ results: filteredRes })
    }
复制代码
render() {
        let { results } = this.state;
        return (
            <div className='autocomp_wrapper'> <input placeholder="Enter your search.." onChange={this.handleInputThrottled} /> <div> {results.map(result=>{result})} </div> </div> ); } } 复制代码

和 underscore 同样的效果，没有其余区别。

使用 RxJS

JS 中的 Reactive Extensions 提供了一个节流运算符，咱们可使用它来实现功能。

首先，咱们安装 rxjs。

npm i rxjs
复制代码

咱们从 rxjs 库导入 throttle

// ...
import { BehaviorSubject } from 'rxjs';
import { throttle } from 'rxjs/operators';
复制代码
class autocomp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            results: []
        }
        this.inputStream = new BehaviorSubject()
    }
复制代码
componentDidMount() {
        this.inputStream
            .pipe(
                throttle(1000)
            )
            .subscribe(v => {
                const filteredRes = data.filter((item)=> {
                    // algorithm to search through the `data` array
                })
                this.setState({ results: filteredRes })
        })
    }

复制代码
render() {
        let { results } = this.state;
        return (
            <div className='autocomp_wrapper'> <input placeholder="Enter your search.." onChange={e => this.inputStream.next(e.target.value)} /> <div> {results.map(result => { result })} </div> </div> ); } } 复制代码

咱们从 rxjs 中导入了 throttle 和 BehaviorSubject，初始化了一个 BehaviorSubject 实例保存在 inputStream 属性，在 componentDidMount 中，咱们将 inputStream 流传递给节流操做符，传入 1000，表示 RxJS 节流控制为 1000ms，节流操做返回的流被订阅以得到流值。

由于在组件加载时订阅了 inputStream，因此咱们开始输入时，输入的内容就被发送到 inputStream 流中。 刚开始时，因为 throttle 操做符 1000ms 内不会发送内容，在这以后发送最新值， 发送以后就开始计算获得结果。

若是咱们以 200ms 1 个字母的速度输入 fidudusola ，该组件将从新渲染 2000ms / 1000ms = 2次。

使用自定义实现

咱们实现本身的节流函数，方便更好的理解节流如何工做。

咱们知道在一个节流控制的函数中，它会根据指定的时间间隔调用，咱们将使用 setTimeout 函数实现这一点。

function throttle(fn, ms) {
    let timeout
    function exec() {
        fn.apply()
    }
    function clear() {
        timeout == undefined ? null : clearTimeout(timeout)
    }
    if(fn !== undefined && ms !== undefined) {
        timeout = setTimeout(exec, ms)
    } else {
        console.error('callback function and the timeout must be supplied')
    }
    // API to clear the timeout
    throttle.clearTimeout = function() {
        clear();
    }
}
复制代码

注：原文自定义实现的节流函数有问题，节流函数的详细实现和解析能够查看个人另外一篇文章，点击查看

个人实现以下：

// fn 是须要执行的函数
// wait 是时间间隔
const throttle = (fn, wait = 50) => {
  // 上一次执行 fn 的时间
  let previous = 0
  // 将 throttle 处理结果看成函数返回
  return function(...args) {
    // 获取当前时间，转换成时间戳，单位毫秒
    let now = +new Date()
    // 将当前时间和上一次执行函数的时间进行对比
    // 大于等待时间就把 previous 设置为当前时间并执行函数 fn
    if (now - previous > wait) {
      previous = now
      fn.apply(this, args)
    }
  }
}
复制代码

上面的实现很是简单，在 React 项目中使用方式以下。

// ...
class autocomp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            results: []
        }
       this.handleInputThrottled = throttle(this.handleInput, 100)
    }
复制代码
handleInput = evt => {
        const value = evt.target.value
        const filteredRes = data.filter((item)=> {
            // algorithm to search through the `data` array
        })
        this.setState({ results: filteredRes })
    }
复制代码
render() {
        let { results } = this.state;
        return (
            <div className='autocomp_wrapper'> <input placeholder="Enter your search.." onChange={this.handleInputThrottled} /> <div> {results.map(result=>{result})} </div> </div> ); } } 复制代码

防抖 Debounce

防抖会强制自上次调用后通过必定时间才会再次调用函数，例如只有在没有被调用的状况下通过一段时间以后（例如100毫秒）才执行该函数。

在防抖时，它忽略对函数的全部调用，直到函数中止调用一段时间以后才会再次执行。

下面将介绍在项目中使用 debounce 的例子。

使用 underscore

// ...
import * as _ from 'underscore';
class autocomp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            results: []
        }
       this.handleInputThrottled = _.debounce(this.handleInput, 100)
    }
    handleInput = evt => {
        const value = evt.target.value
        const filteredRes = data.filter((item)=> {
            // algorithm to search through the `data` array
        })
        this.setState({ results: filteredRes })
    }
    render() {
        let { results } = this.state;
        return (
            <div className='autocomp_wrapper'> <input placeholder="Enter your search.." onChange={this.handleInputThrottled} /> <div> {results.map(result=>{result})} </div> </div> ); } } 复制代码

使用 lodash

// ...
import { debounce } from 'lodash';
class autocomp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            results: []
        }
       this.handleInputThrottled = debounce(this.handleInput, 100)
    }
    handleInput = evt => {
        const value = evt.target.value
        const filteredRes = data.filter((item)=> {
            // algorithm to search through the `data` array
        })
        this.setState({ results: filteredRes })
    }
    render() {
        let { results } = this.state;
        return (
            <div className='autocomp_wrapper'> <input placeholder="Enter your search.." onChange={this.handleInputThrottled} /> <div> {results.map(result=>{result})} </div> </div> ); } } 复制代码

使用 RxJS

// ...
import { BehaviorSubject } from 'rxjs';
import { debounce } from 'rxjs/operators';
class autocomp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            results: []
        }
        this.inputStream = new BehaviorSubject()
    }
    componentDidMount() {
        this.inputStream
            .pipe(
                debounce(100)
            )
            .subscribe(v => {
                const filteredRes = data.filter((item)=> {
                    // algorithm to search through the `data` array
                })
                this.setState({ results: filteredRes })
        })
    }
    render() {
        let { results } = this.state;
        return (
            <div className='autocomp_wrapper'> <input placeholder="Enter your search.." onChange={e => this.inputStream.next(e.target.value)} /> <div> {results.map(result => { result })} </div> </div> ); } } 复制代码

重要领域：游戏

有不少状况须要使用节流和防抖，其中最须要的领域是游戏。游戏中最经常使用的动做是在电脑键盘或者游戏手柄中按键，玩家可能常常按同一个键屡次（每 20 秒 40 次，即每秒 2 次）例如射击、加速这样的动做，但不管玩家按下射击键的次数有多少，它只会发射一次（好比说每秒）。 因此使用节流控制为 1 秒，这样第二次按下按钮将被忽略。

结论

咱们看到了节流和防抖如何提升 React 应用程序的性能，以及重复调用会影响性能，由于组件及其子树将没必要要地从新渲染，因此应该避免在 React 应用中重复调用方法。在小型程序中不会引发注意，但在大型程序中效果会很明显。

❤️ 看完三件事

若是你以为这篇内容对你挺有启发，我想邀请你帮我三个小忙：

  1. 点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）
  2. 关注个人 GitHub，让咱们成为长期关系
  3. 关注公众号「高级前端进阶」，每周重点攻克一个前端面试重难点，公众号后台回复「资料」 送你精选前端优质资料。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程