react hooks实现防抖节流的方法小结
更新时间：2024年04月19日 09:04:43 作者：双子座434
这篇文章主要介绍了react hooks实现防抖节流的几种方法,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
下面均拿一个input框的onChange事件为例。
防抖
1.当持续触发事件时，一定时间段内没有再触发事件，事件处理函数会执行一次。
2.如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
代码：
方法一：
import React from "react";
function ThrotShak() {
let shak;
const service = (data) => {
console.log('向服务端发送数据', data);
}
const handleChange = (e) => {
if (shak) {
clearTimeout(shak)
}
shak = setTimeout(() => {
service(e.target.event);
}, 3000)
}
return (
<div style={{ flex: 1, border: '1px solid blue', padding: '3px' }}>
<div>防抖：多次触发执行最后一次</div>
<input onChange={handleChange} />
</div>
)
}
export default ThrotShak;方法二：
import React from 'react';
import { debounce } from 'lodash';
function ThrotShak(){
const service = (data) => {
console.log('向服务端发送数据', data);
}
const handleChange = () => debounce(service, 500);
return (
<input type="text" onChange={handleChange} />
);
};
export default ThrotShak;节流
当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
代码：
方法一：
import React from "react";
function ThrotShak() {
const service = (data) => {
console.log('向服务端发送数据', data, new Date());
}
let throt;
function handleChange() {
if (throt) {
return ;
}
throt = setTimeout(() => {
service();
throt = null;
}, 3000)
}
return (
<div style={{ flex: 1, border: '1px solid blue', padding: '3px' }}>
<div>节流： 持续触发事件时，每过n钟执行一次</div>
<input onChange={handleChange} />
</div>
)
}
export default ThrotShak;方法二：
import React from 'react';
import { throttle } from 'lodash';
function ThrotShak(){
const service = (data) => {
console.log('向服务端发送数据', data);
}
const handleChange = () => throttle(service, 500);
return (
<input type="text" onChange={handleChange} />
);
};
export default ThrotShak;拓展：
除上面两种实现方法外，还可用用useEffect实现。无论哪种实现方式，大家要以自己的应用场景为准，还要考虑一下性能问题。本身选择防抖或者节流就是要提高性能（减少频繁触发事件，降低不必要的计算，渲染和服务器请求），节约资源（减少浪费服务器资源和带宽），提高用户体验（防止用户误触或者频繁点击）。
实现过程中大家要注意clearTimeout和把赋值参数置为null的区别：clearTimeout是指把定时器清楚掉，并不会把定时器的id置为null，一般用于定时器挂载并未执行时；把赋值参数置为null是要清除缓存，这里不懂得话，可以看一下闭包和浏览器垃圾回收机制得原理。在组件卸载时把定时器清除掉和id置为null一起调用比较好。
心得：
一题多解还是有必要得，既拓宽了自己得思路，又增加了解题技巧，当然，解题还是会受场景和代码框架约束得。
到此这篇关于react hooks实现防抖节流的方法小结的文章就介绍到这了,更多相关react hooks防抖节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
关于React16.0的componentDidCatch方法解读
这篇文章主要介绍了关于React16.0的componentDidCatch方法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要给带大家搞清楚react hooks的类型声明，如果有同学还不清楚react hooks的类型声明，来看本文就对了，文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了每天一个hooks学习之useUnmount，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了react中实现修改input的defaultValue方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家介绍了React JSX基础语法教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
react-native 封装选择弹出框示例(试用ios&android)
本篇文章主要介绍了react-native 封装选择弹出框示例(试用ios&android)，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了详解如何在React组件“外”使用父组件的Props，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家介绍了React报错Invalid hook call解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家介绍了Modal.confirm是否违反了React模式分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
Hook是React16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性，这篇文章主要介绍了React hook的使用2022-10-10
最新评论