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

Posted on by

react項目中，很常見的一個場景:

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

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

我們想要watchValue改變的時候執行doSomething，裡面會引用其他值otherValue1, otherValue2。

這時有個讓人煩惱的問題：

  • 如果不把otherValue1, otherValue2加入依賴數組的話，doSomething裡面很可能會訪問到otherValue1, otherValue2舊的變量引用，從而發生意想不到的錯誤（如果安裝hooks相關eslint的話，會提示警告）。
  • 反之，如果把otherValue1, otherValue2加入依賴數組的話，這兩個值改變的時候doSomething也會執行，這並不是我們想要的(我們隻想引用他們的值，但不想它們觸發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改變的時候，不會觸發組件重新渲染(useRef的current值改變不會觸發組件渲染)，從而值改變時候界面不會更新！

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

可以將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，用來觸發組件渲染
  const [, setState] = useState(init);
  
  // 讀取value時，取到的是最新的值
  // 設置value時，會觸發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的引用特性，不會觸發doSomething不必要的執行。又有瞭useState的響應特性，改變.value的時候會觸發組件渲染和界面更新。
我們想要變量改變觸發doSomething的時候，就把watch.value加入依賴數組。我們隻想引用值而不想其觸發doSomething的時候，就把變量本身加入數組。

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

推薦閱讀：