state 状态相关

梦之云2025-10-26 10:07

useGetState

给 React.useState 增加了一个 getter 方法，以获取当前最新值。

js 复制代码

import { useState, useCallback } from 'react';

export type SetState<S> = S | ((prevState: S) => S);

function useGetState<S>(initialState: S | (() => S)) {
  const [state, setState] = useState(initialState);
  
  // 使用 ref 保存最新的 state 值
  const stateRef = useRef(state);
  stateRef.current = state;
  
  // 获取当前状态的方法
  const getState = useCallback(() => stateRef.current, []);
  
  // 包装 setState，同时更新 ref
  const setSetState = useCallback((setStateAction: SetState<S>) => {
    setState(prevState => {
      const nextState = setStateAction instanceof Function 
        ? setStateAction(prevState) 
        : setStateAction;
      stateRef.current = nextState;
      return nextState;
    });
  }, []);

  return [state, setSetState, getState] as const;
}

useResetState

提供重置 state 方法的 Hooks，用法与 React.useState 基本一致。

js 复制代码

import { useState, useRef, useCallback } from 'react';

type Dispatch<T> = (value: T | ((prevState: T) => T)) => void;

function useResetState<S>(initialState: S | (() => S)): [S, Dispatch<S>, () => void] {
  const [state, setState] = useState(initialState);
  const initialRef = useRef(initialState);
  
  const reset = useCallback(() => {
    setState(initialRef.current);
  }, []);
  
  return [state, setState, reset];
}