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使用Canvas繪制大數(shù)據(jù)表格的實(shí)例代碼
之前一直想用Canvas做表格渲染的,最近發(fā)現(xiàn)了一個(gè)很不錯(cuò)的Canvas繪圖框架Leafer,api很友好就試著寫了一下,文中有詳細(xì)的代碼示例供大家參考,感興趣的小伙伴可以自己動(dòng)手試試2023-09-09
props是組件（包括函數(shù)組件和class組件）間的內(nèi)置屬性，用其可以傳遞數(shù)據(jù)給子節(jié)點(diǎn)，props用來傳遞參數(shù)。組件實(shí)例化過程中，你可以向其中傳遞一個(gè)參數(shù)，這個(gè)參數(shù)會(huì)在實(shí)例化過程中被引用2022-09-09
Can't?perform?a?React?state?update?on?an?unmoun
這篇文章主要為大家介紹了Can't?perform?a?React?state?update?on?an?unmounted?component報(bào)錯(cuò)解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了React函數(shù)式組件的性能優(yōu)化思路詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
React-router中結(jié)合webpack實(shí)現(xiàn)按需加載實(shí)例
本篇文章主要介紹了React-router中結(jié)合webpack實(shí)現(xiàn)按需加載實(shí)例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了React反向代理及樣式獨(dú)立詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
本文主要介紹了React里的Fragment標(biāo)簽的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了React實(shí)現(xiàn)todolist功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
本文詳細(xì)的介紹了React傳遞參數(shù)的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要介紹了淺談從React渲染流程分析Diff算法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09