Reac怎么擺脫hooks依賴煩惱

這篇文章主要介紹了Reac怎么擺脫hooks依賴煩惱，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

react項(xiàng)目中，很常見(jiàn)的一個(gè)場(chǎng)景:

const [watchValue, setWatchValue] = useState('');
const [otherValue1, setOtherValue1] = useState('');
const [otherValue2, setOtherValue2] = useState('');

useEffect(() => {
    doSomething(otherValue1, otherValue2);
}, [watchValue, otherValue1, otherValue2]);

我們想要watchValue改變的時(shí)候執(zhí)行doSomething，里面會(huì)引用其他值otherValue1, otherValue2。

這時(shí)有個(gè)讓人煩惱的問(wèn)題：

• 如果不把otherValue1, otherValue2加入依賴數(shù)組的話，doSomething里面很可能會(huì)訪問(wèn)到otherValue1, otherValue2舊的變量引用，從而發(fā)生意想不到的錯(cuò)誤（如果安裝hooks相關(guān)eslint的話，會(huì)提示警告）。

• 反之，如果把otherValue1, otherValue2加入依賴數(shù)組的話，這兩個(gè)值改變的時(shí)候doSomething也會(huì)執(zhí)行，這并不是我們想要的(我們只想引用他們的值，但不想它們觸發(fā)doSomething)。

把otherValue1, otherValue2變成ref可以解決這個(gè)問(wèn)題：

const [watchValue, setWatchValue] = useState('');
const other1 = useRef('');
const other2 = useRef('');

// ref可以不加入依賴數(shù)組，因?yàn)橐貌蛔?
useEffect(() => {
    doSomething(other1.current, other2.current);
}, [watchValue]);

這樣other1, other2的變量引用不會(huì)變，解決了前面的問(wèn)題，但是又引入了一個(gè)新的問(wèn)題：other1, other2的值current改變的時(shí)候，不會(huì)觸發(fā)組件重新渲染(useRef的current值改變不會(huì)觸發(fā)組件渲染)，從而值改變時(shí)候界面不會(huì)更新！

這就是hooks里面的一個(gè)頭疼的地方，useState變量會(huì)觸發(fā)重新渲染、保持界面更新，但作為useEffect的依賴時(shí)，又總會(huì)觸發(fā)不想要的函數(shù)執(zhí)行。useRef變量可以放心作為useEffect依賴，但是又不會(huì)觸發(fā)組件渲染，界面不更新。
如何解決？

可以將useRef和useState的特性結(jié)合起來(lái)，構(gòu)造一個(gè)新的hooks函數(shù): useStateRef。

import { useState, useRef } from "react";

// 使用 useRef 的引用特質(zhì)， 同時(shí)保持 useState 的響應(yīng)性
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;
  });
  // 設(shè)置一個(gè) state，用來(lái)觸發(fā)組件渲染
  const [, setState] = useState(init);
  
  // 讀取value時(shí)，取到的是最新的值
  // 設(shè)置value時(shí)，會(huì)觸發(fā)setState，組件渲染
  const [ref] = useState<StateRefObj<T>>(() => {
    return {
      _state: init,
      set value(v: T) {
        this._state = v;
        setState(v);
      },
      get value() {
        return this._state;
      },
    };
  });
  
  // 返回的是一個(gè)引用變量，整個(gè)組件生命周期之間不變
  return ref;
}

這樣，我們就能這樣用：

const watch = useStateRef('');
const other1 = useStateRef('');
const other2 = useStateRef('');

// 這樣改變值：watch.value = "new";

useEffect(() => {
    doSomething(other1.value, other2.value);
   // 其實(shí)現(xiàn)在這三個(gè)值都是引用變量，整個(gè)組件生命周期之間不變，完全可以不用加入依賴數(shù)組
   // 但是react hooks的eslint插件只能識(shí)別useRef作為引用，不加人會(huì)警告，為了變量引用安全還是加入
}, [watch.value, other1, other2]);

這樣，watch, other1,other2有useRef的引用特性，不會(huì)觸發(fā)doSomething不必要的執(zhí)行。又有了useState的響應(yīng)特性，改變.value的時(shí)候會(huì)觸發(fā)組件渲染和界面更新。
我們想要變量改變觸發(fā)doSomething的時(shí)候，就把watch.value加入依賴數(shù)組。我們只想引用值而不想其觸發(fā)doSomething的時(shí)候，就把變量本身加入數(shù)組。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Reac怎么擺脫hooks依賴煩惱”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!