引言
函数节流(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 (
useState
,useMemo
,useContext
,useReducer
, 等)
在这篇文章中,我们将研究如何在不使用 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。