React 小技巧教你如何摆脱hooks依赖烦恼

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可以不加入依赖数组，因为引用不变
useEffect(() => {
    doSomething(other1.current, other2.current);
}, [watchValue]);

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]);