能否用setState函数获取当前状态？异步场景下的实现疑问与优化

云上老周

2026-7-24

问题解答

你的当前做法虽然能拿到最新状态，但存在隐性问题：React会调度一次状态更新流程——哪怕你返回了原状态，内部还是会执行状态比对等操作，虽不会触发重渲染，但属于不必要的性能开销，而且写法不够直观，容易让其他开发者误解你要修改状态。

下面是两种更优的实现方式：

方法一：使用useRef同步最新状态

通过useRef保存state的最新值，每次state更新时同步更新ref，异步任务完成后直接读取ref.current就能拿到当前状态，完全不会触发任何状态更新流程：

const Comp = () => {
  const [state, setState] = useState(1);
  const stateRef = useRef(state);

  // 每当state更新时，同步到ref中
  useEffect(() => {
    stateRef.current = state;
  }, [state]);

  const update = useCallback(async () => {
    await something; // 等待异步任务完成

    // 直接获取最新状态
    console.log(stateRef.current);
  }, []);

  return (
    <>
      <div>{state}</div>
      <button onClick={update}>update</button>
    </>
  );
};

方法二：使用useReducer（适合复杂状态场景）

如果你的组件状态逻辑比较复杂，useReducer是更规范的选择。dispatch函数是稳定的，你可以通过自定义action来获取当前状态：

const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE':
      return action.payload;
    case 'GET_CURRENT':
      // 触发回调返回当前状态
      action.callback(state);
      return state;
    default:
      return state;
  }
};

const Comp = () => {
  const [state, dispatch] = useReducer(reducer, 1);

  const update = useCallback(async () => {
    await something;

    // 发送获取当前状态的action
    dispatch({
      type: 'GET_CURRENT',
      callback: (currState) => {
        console.log(currState);
      }
    });
  }, [dispatch]);

  return (
    <>
      <div>{state}</div>
      <button onClick={update}>update</button>
    </>
  );
};