react組件中debounce防抖功能失效問(wèn)題解決辦法
一、問(wèn)題背景
import { debounce } from 'lodash';
const [searchKey, setSearchKey] = useState('');
// 防抖函數(shù)
const debounceList = debounce(getList, 500);<Input
value={searchKey}
onChange={(e) => {
setSearchKey(e.target.value);
}}
className={`${style.search}`}
placeholder="請(qǐng)輸入關(guān)鍵詞"
/>頁(yè)面上有一個(gè)搜索框，searchKey是通過(guò)useState定義的響應(yīng)式數(shù)據(jù)，onChange事件調(diào)用了setSearchKey方法，那么只要輸入變化時(shí)，組件就會(huì)重新渲染從而重新生成新的防抖函數(shù)debounceList。最終造成防抖功能失效。
二、解決辦法
使用 useRef 定義searchKey數(shù)據(jù)，使其成為非響應(yīng)式數(shù)據(jù)，通過(guò) searchKey.current 獲取和修改值：
// 搜索關(guān)鍵字
const searchKey = useRef('');
// 修改數(shù)據(jù)
const setSearchKey = (val) => {
searchKey.current = val;
};<Input
onChange={(e) => {
setSearchKey(e.target.value);
}}
className={`${style.search}`}
placeholder="請(qǐng)輸入關(guān)鍵詞"
/>三、拓展
關(guān)于處理防抖失效的問(wèn)題，可能有人會(huì)想到使用 useCallback 來(lái)緩存 debounce 防抖函數(shù)，比如你可能會(huì)這樣寫：
const [searchKey, setSearchKey] = useState('');
const debounceList = useCallback(debounce(getList, 500), []);這樣防抖功能雖然生效了，但是你無(wú)法獲取最新的searchKey值；如果想獲取最新的searchKey值，就要把searchKey加到后面的 [ ] 中，但是這樣防抖又失效了。所以只能采用useRef 定義非響應(yīng)式數(shù)據(jù)來(lái)解決。
到此這篇關(guān)于react組件中debounce防抖功能失效的文章就介紹到這了,更多相關(guān)react組件debounce防抖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React中映射一個(gè)嵌套數(shù)組實(shí)現(xiàn)demo
這篇文章主要為大家介紹了React中映射一個(gè)嵌套數(shù)組實(shí)現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了React新文檔濫用effect出現(xiàn)的問(wèn)題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
關(guān)于?React?中?useEffect?使用問(wèn)題淺談
本文主要介紹了關(guān)于React中useEffect使用問(wèn)題淺談，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
React組件中使用JSON數(shù)據(jù)文件的方法詳解
要在 React 組件中使用 JSON 數(shù)據(jù),有多種方法,這篇文章主要為大家詳細(xì)介紹了五個(gè)常見(jiàn)的方法,文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下2024-01-01
在Create React App中使用CSS Modules的方法示例
本文介紹了如何在 Create React App 腳手架中使用 CSS Modules 的兩種方式。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。2019-01-01
在Web開發(fā)的早期,jQuery是一個(gè)革命性的庫(kù),它極大地簡(jiǎn)化了DOM操作、事件處理、動(dòng)畫制作以及Ajax請(qǐng)求等任務(wù),React的出現(xiàn),jQuery在新項(xiàng)目中的必要性開始受到質(zhì)疑,本文將探討為什么在React應(yīng)用中不需要jQuery,感興趣的朋友可以參考下2024-02-02
React 主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。本文給大家介紹React 非父子組件傳參的相關(guān)知識(shí)，感興趣的朋友跟隨一起看看吧2021-04-04
React從插槽、路由、redux的詳細(xì)過(guò)程
React需要自己開發(fā)支持插槽功能，原理：父組件組件中寫入的HTML，可以傳入子組件的props中，這篇文章主要介紹了React從插槽、路由、redux的詳細(xì)過(guò)程,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了React手寫redux過(guò)程，目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當(dāng)中去，本文給大家詳細(xì)講解，需要的朋友可以參考下2022-12-12
詳解一個(gè)基于react+webpack的多頁(yè)面應(yīng)用配置
這篇文章主要介紹了詳解一個(gè)基于react+webpack的多頁(yè)面應(yīng)用配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01