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

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

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

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

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è)組件生命周期之間不變，完全可以不用加入依賴(lài)數(shù)組
   // 但是react hooks的eslint插件只能識(shí)別useRef作為引用，不加人會(huì)警告，為了變量引用安全還是加入
}, [watch.value, other1, other2]);