React中實(shí)現(xiàn)防抖功能的兩種方式小結(jié)
更新時(shí)間：2023年10月23日 10:51:09 作者：milugloomy
這篇文章主要介紹了React中實(shí)現(xiàn)防抖功能的兩種方式小結(jié),具有很好的 參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
問題
這有一個(gè)簡(jiǎn)單的防抖函數(shù)，短時(shí)間內(nèi)多次觸發(fā)同一事件，只執(zhí)行最后一次
function debounce (fn, wait) {
let timer = null
return function (...args) {
if (timer !== null) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn(args)
timer = null
}, wait)
}
}
但問題是這個(gè)函數(shù)在react中使用不生效
export default () => {
const handleClick = debounce(() => console.log("click fast!"), 1000));
return (
<button onClick={handleClick}>click fast!</button>
);
};
原因就是函數(shù)式組件每次渲染，函數(shù)都會(huì)被重建，導(dǎo)致平時(shí)用的 debounce 函數(shù)中的timer會(huì)重新創(chuàng)建，進(jìn)而導(dǎo)致防抖失效。
方案一
使用useRef來緩存timer變量
export default function () {
const click = useDebounce((e: Event) => {
console.log(e);
}, 1000)
return (
<button onClick={click}>按鈕</button>
);
}
function useDebounce(fn: Function, delay: number) {
const refTimer = useRef<number>();
return function f(...args: any) {
if (refTimer.current) {
clearTimeout(refTimer.current);
}
refTimer.current = setTimeout(() => {
fn(args);
}, delay);
}
}
方案二
使用useCallback來緩存函數(shù)，只要第二個(gè)參數(shù)傳空數(shù)組，那么在組件重新選然時(shí)，useCallback中的函數(shù)就不會(huì)重新創(chuàng)建
export default function DeBounce() {
const click = useCallback(clickInner(), []);
function clickInner() {
let timer: number;
return function (e: Event) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
console.log(e);
}, 1000);
}
}
return (
<button onClick={click}>按鈕</button>
);
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React項(xiàng)目中使用Redux的?react-redux
這篇文章主要介紹了React項(xiàng)目中使用Redux的?react-redux，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
最近需要使用 Hybrid 的方式開發(fā)一 個(gè) APP,交互和原生 APP 相似并且需要 IM 通信,本文給大家介紹了使用React實(shí)現(xiàn)原生APP切換效果,文中通過代碼示例講解的非常詳細(xì),感興趣的小伙伴跟著小編一起來看看吧2025-01-01
react實(shí)現(xiàn)Radio組件的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)Radio組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要給大家介紹了關(guān)于React.Js添加與刪除onScroll事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
webpack手動(dòng)配置React開發(fā)環(huán)境的步驟
本篇文章主要介紹了webpack手動(dòng)配置React開發(fā)環(huán)境的步驟，webpack手動(dòng)配置一個(gè)獨(dú)立的React開發(fā)環(huán)境, 開發(fā)環(huán)境完成后, 支持自動(dòng)構(gòu)建, 自動(dòng)刷新, sass語(yǔ)法 等功能...感興趣的小伙伴們可以參考一下2018-07-07
React Native 是目前流行的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架之一。本文介紹react native環(huán)境安裝流程及遇到問題解決方法，感興趣的朋友一起看看吧2021-05-05
ReactiveCocoa代碼實(shí)踐之-UI組件的RAC信號(hào)操作
這篇文章主要介紹了ReactiveCocoa代碼實(shí)踐之-UI組件的RAC信號(hào)操作 的相關(guān)資料,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了React如何自定義輪播圖Carousel組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
使用react-native-image-viewer實(shí)現(xiàn)大圖預(yù)覽
這篇文章主要介紹了使用react-native-image-viewer實(shí)現(xiàn)大圖預(yù)覽，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了React中的refs的使用教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02