React 小技巧教你如何擺脫hooks依賴煩惱
react項目中，很常見的一個場景:
const [watchValue, setWatchValue] = useState('');
const [otherValue1, setOtherValue1] = useState('');
const [otherValue2, setOtherValue2] = useState('');
useEffect(() => {
doSomething(otherValue1, otherValue2);
}, [watchValue, otherValue1, otherValue2]);
我們想要watchValue改變的時候執(zhí)行doSomething，里面會引用其他值otherValue1, otherValue2。
這時有個讓人煩惱的問題：
- 如果不把
otherValue1,otherValue2加入依賴數組的話，doSomething里面很可能會訪問到otherValue1,otherValue2舊的變量引用，從而發(fā)生意想不到的錯誤（如果安裝hooks相關eslint的話，會提示警告）。 - 反之，如果把
otherValue1,otherValue2加入依賴數組的話，這兩個值改變的時候doSomething也會執(zhí)行，這并不是我們想要的(我們只想引用他們的值，但不想它們觸發(fā)doSomething)。
把otherValue1, otherValue2變成ref可以解決這個問題：
const [watchValue, setWatchValue] = useState('');
const other1 = useRef('');
const other2 = useRef('');
// ref可以不加入依賴數組，因為引用不變
useEffect(() => {
doSomething(other1.current, other2.current);
}, [watchValue]);
這樣other1, other2的變量引用不會變，解決了前面的問題，但是又引入了一個新的問題：other1, other2的值current改變的時候，不會觸發(fā)組件重新渲染(useRef的current值改變不會觸發(fā)組件渲染)，從而值改變時候界面不會更新！
這就是hooks里面的一個頭疼的地方，useState變量會觸發(fā)重新渲染、保持界面更新，但作為useEffect的依賴時，又總會觸發(fā)不想要的函數執(zhí)行。useRef變量可以放心作為useEffect依賴，但是又不會觸發(fā)組件渲染，界面不更新。
如何解決？
可以將useRef和useState的特性結合起來，構造一個新的hooks函數: useStateRef。
import { useState, useRef } from "react";
// 使用 useRef 的引用特質， 同時保持 useState 的響應性
type StateRefObj<T> = {
_state: T;
value: T;
};
export default function useStateRef<T>(
initialState: T | (() => T)
): StateRefObj<T> {
// 初始化值
const [init] = useState(() => {
if (typeof initialState === "function") {
return (initialState as () => T)();
}
return initialState;
});
// 設置一個 state，用來觸發(fā)組件渲染
const [, setState] = useState(init);
// 讀取value時，取到的是最新的值
// 設置value時，會觸發(fā)setState，組件渲染
const [ref] = useState<StateRefObj<T>>(() => {
return {
_state: init,
set value(v: T) {
this._state = v;
setState(v);
},
get value() {
return this._state;
},
};
});
// 返回的是一個引用變量，整個組件生命周期之間不變
return ref;
}
這樣，我們就能這樣用：
const watch = useStateRef('');
const other1 = useStateRef('');
const other2 = useStateRef('');
// 這樣改變值：watch.value = "new";
useEffect(() => {
doSomething(other1.value, other2.value);
// 其實現在這三個值都是引用變量，整個組件生命周期之間不變，完全可以不用加入依賴數組
// 但是react hooks的eslint插件只能識別useRef作為引用，不加人會警告，為了變量引用安全還是加入
}, [watch.value, other1, other2]);
這樣，watch, other1,other2有useRef的引用特性，不會觸發(fā)doSomething不必要的執(zhí)行。又有了useState的響應特性，改變.value的時候會觸發(fā)組件渲染和界面更新。
我們想要變量改變觸發(fā)doSomething的時候，就把watch.value加入依賴數組。我們只想引用值而不想其觸發(fā)doSomething的時候，就把變量本身加入數組。
以上就是React 小技巧教你如何擺脫hooks依賴煩惱的詳細內容，更多關于React hooks依賴的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了react中使用usestate踩坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了React路由中的redux和redux知識點拓展，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，感興趣的朋友可以參考學習一下2022-08-08
setState?是?React?中用于更新組件狀態(tài)（state）的方法,本文給大家介紹react數據管理中的setState與Props知識,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了webpack構建react多頁面應用詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
React?+?Typescript領域初學者的常見問題和技巧(最新)
這篇文章主要介紹了React?+?Typescript領域初學者的常見問題和技巧,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家介紹了React?Native項目設置路徑別名實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了React組件通信,在開發(fā)中組件通信是React中的一個重要的知識點，本文通過實例代碼給大家講解react中常用的父子、跨組件通信的方法，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了antd踩坑之javascriptEnabled配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了vite+react+tailwindcss的簡單使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了淺談React中組件邏輯復用的那些事兒，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05