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

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

Hooks 是一種函數(shù)，該函數(shù)允許您從函數(shù)式組件 “勾住(hook into)” React 狀態(tài)和生命周期功能。 Hooks 在類內部不起作用 - 它們允許你無需類就使用 React，本文帶領大家學習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加入依賴數(shù)組的話，doSomething里面很可能會訪問到otherValue1, otherValue2舊的變量引用，從而發(fā)生意想不到的錯誤（如果安裝hooks相關eslint的話，會提示警告）。
反之，如果把otherValue1, otherValue2加入依賴數(shù)組的話，這兩個值改變的時候doSomething也會執(zhí)行，這并不是我們想要的(我們只想引用他們的值，但不想它們觸發(fā)doSomething)。

把otherValue1, otherValue2變成ref可以解決這個問題：

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

// ref可以不加入依賴數(shù)組，因為引用不變
useEffect(() => {
    doSomething(other1.current, other2.current);
}, [watchValue]);

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

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

可以將useRef和useState的特性結合起來，構造一個新的hooks函數(shù): 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);
   // 其實現(xiàn)在這三個值都是引用變量，整個組件生命周期之間不變，完全可以不用加入依賴數(shù)組
   // 但是react hooks的eslint插件只能識別useRef作為引用，不加人會警告，為了變量引用安全還是加入
}, [watch.value, other1, other2]);

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

以上就是React 小技巧教你如何擺脫hooks依賴煩惱的詳細內容，更多關于React hooks依賴的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: