防抖和节流

374 阅读2分钟

引言

函数节流(throttle)

规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。 使用 React 构建应用程序时,我们总是会遇到一些限制问题,比如大量的调用、异步网络请求和 DOM 更新等,我们可以使用 React 提供的功能来检查这些。

个人理解 函数节流就是fps游戏的射速,就算一直按着鼠标射击,也只会在规定射速内射出子弹。

函数防抖(debounce)

在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

个人理解 函数防抖就是法师发技能的时候要读条,技能读条没完再按技能就会重新读条。

结合应用场景

  • debounce

    • search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
    • window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
  • throttle

    • 鼠标不断点击触发,mousedown(单位时间内只触发一次)
    • 监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断
  • shouldComponentUpdate(...) 生命周期钩子

  • React.PureComponent

  • React.memo

  • Windowing and Virtualization

  • Memoization

  • Hydration

  • Hooks (useStateuseMemouseContextuseReducer, 等)

在这篇文章中,我们将研究如何在不使用 React 提供的功能下来改进 React 应用程序性能,我们将使用一种不仅仅适用于 React 的技术:节流(Throttle)和防抖(Debounce)。

从一个例子开始

#例子 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。