这些Hook更优雅地管理你的状态

useBoolean 和 useToggle

这两个都是特殊情况下的值管理。

useBoolean，优雅的管理 boolean 状态的 Hook。

useToggle，用于在两个状态值间切换的 Hook。

实际上，useBoolean 又是 useToggle 的一个特殊使用场景。

先看 useToggle。

• 这里使用了 typescript 函数重载声明入参和出参类型，根据不同的入参会返回不同的结果。比如第一个入参为 boolean 布尔值，则返回一个元组，第一项为 boolean 值，第二个为更新函数。优先级从上到下依次变低。
• 入参可能有两个值，第一个为默认值（认为是左值），第二个是取反之后的值（认为是右值），可以不传，不传的时候，则直接根据默认值取反!defaultValue。
• toggle 函数。切换值，也就是上面的左值和右值的转换。
• set。直接设置值。
• setLeft。设置默认值（左值）。
• setRight。如果传入了 reverseValue, 则设置为 reverseValue。否则设置为 defautValue 的取反值。

// TS 函数重载的使用
function useToggle(): [boolean, Actions];

function useToggle(defaultValue: T): [T, Actions];

function useToggle(defaultValue: T, reverseValue: U): [T | U, Actions];

function useToggle(
  // 默认值
  defaultValue: D = false as unknown as D,
  // 取反
  reverseValue?: R,
) {
  const [state, setState] = useState(defaultValue);

  const actions = useMemo(() => {
    const reverseValueOrigin = (reverseValue === undefined ? !defaultValue : reverseValue) as D | R;

    // 切换 state
    const toggle = () => setState((s) => (s === defaultValue ? reverseValueOrigin : defaultValue));
    // 修改 state
    const set = (value: D | R) => setState(value);
    // 设置为 defaultValue
    const setLeft = () => setState(defaultValue);
    // 如果传入了 reverseValue, 则设置为 reverseValue。 否则设置为 defautValue 的反值
    const setRight = () => setState(reverseValueOrigin);

    return {
      toggle,
      set,
      setLeft,
      setRight,
    };
    // useToggle ignore value change
    // }, [defaultValue, reverseValue]);
  }, []);

  return [state, actions];
}

而 useBoolean 是对 useToggle 的一个使用。如下，比较简单，不细说

export default function useBoolean(defaultValue = false): [boolean, Actions] {
  const [state, { toggle, set }] = useToggle(defaultValue);

  const actions: Actions = useMemo(() => {
    const setTrue = () => set(true);
    const setFalse = () => set(false);
    return {
      toggle,
      set: (v) => set(!!v),
      setTrue,
      setFalse,
    };
  }, []);

  return [state, actions];
}

usePrevious

保存上一次状态的 Hook。

其原理，是每次状态变更的时候，比较值有没有发生变化，变更状态：

• 维护两个状态 prevRef（保存上一次的状态）和 curRef（保存当前状态）。
• 状态变更的时候，使用 shouldUpdate 判断是否发生变化，默认通过Object.is 判断。开发者可以自定义 shouldUpdate 函数，并决定什么时候记录上一次状态。
• 状态发生变化，更新 prevRef 的值为上一个 curRef，并更新 curRef 为当前的状态。

const defaultShouldUpdate = (a?: T, b?: T) => !Object.is(a, b);
function usePrevious(
  state: T,
  shouldUpdate: ShouldUpdateFunc = defaultShouldUpdate,
): T | undefined {
  // 使用了 useRef 的特性，一直保持引用不变
  // 保存上一次值
  const prevRef = useRef();
  // 当前值
  const curRef = useRef();

  // 自定义是否更新上一次的值
  if (shouldUpdate(curRef.current, state)) {
    prevRef.current = curRef.current;
    curRef.current = state;
  }

  return prevRef.current;
}

useRafState

只在 requestAnimationFrame callback 时更新 state，一般用于性能优化。

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

假如你的操作是比较频繁的，就可以通过这个 hook 进行性能优化。

• 重点看 setRafState 方法，它执行的时候，会取消上一次的 setRafState 操作。重新通过 requestAnimationFrame 去控制 setState 的执行时机。
• 另外在页面卸载的时候，会直接取消操作，避免内存泄露。

function useRafState(initialState?: S | (() => S)) {
  const ref = useRef(0);
  const [state, setState] = useState(initialState);

  const setRafState = useCallback((value: S | ((prevState: S) => S)) => {
    cancelAnimationFrame(ref.current);
    ref.current = requestAnimationFrame(() => {
      setState(value);
    });
  }, []);

  // unMount 的时候，去除监听
  useUnmount(() => {
    cancelAnimationFrame(ref.current);
  });

  return [state, setRafState] as const;
}

useSafeState

function useSafeState(initialState?: S | (() => S)) {
  // 判断是否卸载
  const unmountedRef = useUnmountedRef();
  const [state, setState] = useState(initialState);
  const setCurrentState = useCallback((currentState) => {
    // 如果组件卸载，则停止更新
    if (unmountedRef.current) return;
    setState(currentState);
  }, []);

  return [state, setCurrentState] as const;
}

const useUnmountedRef = () => {
  const unmountedRef = useRef(false);
  useEffect(() => {
    unmountedRef.current = false;
    // 如果已经卸载，则会执行 return 中的逻辑
    return () => {
      unmountedRef.current = true;
    };
  }, []);
  return unmountedRef;
};

function useGetState(initialState?: S) {
  const [state, setState] = useState(initialState);
  // useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。
  // 使用 useRef 处理 state
  const stateRef = useRef(state);
  stateRef.current = state;
  const getState = useCallback(() => stateRef.current, []);

  return [state, setState, getState];
}

const [count, setCount, getCount] = useGetState(0);

useEffect(() => {
  const interval = setInterval(() => {
    console.log('interval count', getCount());
  }, 3000);

  return () => {
    clearInterval(interval);
  };
}, []);