快捷導(dǎo)航

React 小技巧教你如何擺脫hooks依賴煩惱

更新時(shí)間：2021年05月17日 15:52:07 作者：賜你歲月如歌

Hooks 是一種函數(shù)，該函數(shù)允許您從函數(shù)式組件 “勾住(hook into)” React 狀態(tài)和生命周期功能。 Hooks 在類內(nèi)部不起作用 - 它們?cè)试S你無(wú)需類就使用 React，本文帶領(lǐng)大家學(xué)習(xí)React 小技巧教你如何擺脫hooks依賴煩惱，感興趣的朋友一起看看吧

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ù)組。

以上就是React 小技巧教你如何擺脫hooks依賴煩惱的詳細(xì)內(nèi)容，更多關(guān)于React hooks依賴的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: