react組件中debounce防抖功能失效問題解決辦法
一、問題背景
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)鍵詞"
/>頁面上有一個(gè)搜索框，searchKey是通過useState定義的響應(yīng)式數(shù)據(jù)，onChange事件調(diào)用了setSearchKey方法，那么只要輸入變化時(shí)，組件就會(huì)重新渲染從而重新生成新的防抖函數(shù)debounceList。最終造成防抖功能失效。
二、解決辦法
使用 useRef 定義searchKey數(shù)據(jù)，使其成為非響應(yīng)式數(shù)據(jù)，通過 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)于處理防抖失效的問題，可能有人會(huì)想到使用 useCallback 來緩存 debounce 防抖函數(shù)，比如你可能會(huì)這樣寫：
const [searchKey, setSearchKey] = useState('');
const debounceList = useCallback(debounce(getList, 500), []);這樣防抖功能雖然生效了，但是你無法獲取最新的searchKey值；如果想獲取最新的searchKey值，就要把searchKey加到后面的 [ ] 中，但是這樣防抖又失效了。所以只能采用useRef 定義非響應(yīng)式數(shù)據(jù)來解決。
到此這篇關(guān)于react組件中debounce防抖功能失效的文章就介紹到這了,更多相關(guān)react組件debounce防抖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React Native模塊之Permissions權(quán)限申請(qǐng)的實(shí)例相機(jī)
這篇文章主要介紹了React Native模塊之Permissions權(quán)限申請(qǐng)的實(shí)例相機(jī)的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了redux工作原理講解及使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-11-11
react實(shí)現(xiàn)todolist的增刪改查詳解
這篇文章主要為大家介紹了react實(shí)現(xiàn)todolist的增刪改查，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了React Umi國際化配置方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-04-04
本篇文章主要介紹了ReactNative之FlatList的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要跟大家介紹了關(guān)于React中事件處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要為大家介紹了ReactJS中不同類型的狀態(tài)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
react-native android狀態(tài)欄的實(shí)現(xiàn)
這篇文章主要介紹了react-native android狀態(tài)欄的實(shí)現(xiàn)，使?fàn)顟B(tài)欄顏色與App顏色一致，使用戶界面更加整體。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家介紹了ahooks整體架構(gòu)及React工具庫的源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
react-router-dom 嵌套路由的實(shí)現(xiàn)
這篇文章主要介紹了react-router-dom 嵌套路由的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05