阅读 176

防抖和节流

引言

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

  • 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。

文章分类
前端
文章标签