在现代 React 开发中，useReducer 作为管理复杂状态逻辑的利器，被广泛应用于需要集中处理多个子状态或具有明确更新逻辑的场景。然而，开发者在实际使用过程中常常会遇到一个令人困扰的问题：在 useReducer 的 reducer 函数之外（例如副作用或事件回调中），无法获取到最新的状态值。这本质上是 JavaScript 闭包机制与 React 状态更新异步特性共同作用的结果。而巧妙地结合 useRef 钩子，可以有效解决这一“值不同步”难题。

我们先来看一个典型的场景。假设你正在开发一个计时器组件，使用 useReducer 来管理计时器的状态（如是否运行、当前时间等）。你可能希望在组件卸载时清除定时器，同时在某些操作中根据当前状态决定行为。代码大致如下：

jsx
const timerReducer = (state, action) => {
switch (action.type) {
case 'START':
return { ...state, isRunning: true };
case 'STOP':
return { ...state, isRunning: false };
case 'TICK':
return { ...state, time: state.time + 1 };
default:
return state;
}
};

function Timer() {
const [state, dispatch] = useReducer(timerReducer, { time: 0, isRunning: false });

useEffect(() => {
if (!state.isRunning) return;

const interval = setInterval(() => {
  // 这里使用的 state.isRunning 是闭包中的旧值！
  if (state.isRunning) {
    dispatch({ type: 'TICK' });
  }
}, 1000);

return () => clearInterval(interval);

}, [state.isRunning]);
}

上述代码看似合理，但存在隐患。setInterval 内部引用的 state.isRunning 是创建时的快照，即使外部状态已更新为 false，定时器内部仍可能依据旧值继续执行 dispatch，造成不必要的状态更新甚至内存泄漏。

这就是典型的“闭包陷阱”。useEffect 依赖 state.isRunning 触发清理和重建定时器，虽然能间接解决问题，但频繁重建 setInterval 并非最优解，且在更复杂的逻辑中难以维护。

此时，useRef 成为我们破局的关键。useRef 返回一个可变的 ref 对象，其 .current 属性在整个组件生命周期中保持不变，且对其赋值不会触发重新渲染。更重要的是，它可以在任何地方被读取和修改，从而打破闭包限制。

我们可以利用 useRef 来实时追踪当前的状态。改进方案如下：

jsx
function Timer() {
const [state, dispatch] = useReducer(timerReducer, { time: 0, isRunning: false });
const stateRef = useRef(state);

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

useEffect(() => {
if (!state.isRunning) return;

const interval = setInterval(() => {
  // 使用 ref 获取最新状态，避免闭包问题
  if (stateRef.current.isRunning) {
    dispatch({ type: 'TICK' });
  }
}, 1000);

return () => clearInterval(interval);

}, [state.isRunning]);
}

在这个版本中，stateRef.current 始终指向最新的 state。即使 setInterval 内部的函数是在旧闭包中定义的，它也能通过 stateRef.current 动态读取当前真实状态，从而做出正确判断。这种模式被称为“ref synchronization”或“state snapshotting”。

进一步地，如果我们在某个异步操作中需要基于当前状态做决策，比如发送请求前检查用户是否已登录，也可以采用相同策略：

jsx const handleAction = useCallback(async () => { const currentState = stateRef.current; if (currentState.isLoggedIn) { await fetch('/api/action'); } }, []);

由于 handleAction 被 useCallback 缓存，通常不会重新创建，但通过 stateRef.current，它依然能访问到最新的状态，避免了因闭包导致的逻辑错误。

需要注意的是，useRef 并不能替代状态管理。它只是提供了一种“读取最新值”的手段。状态更新仍应通过 dispatch 触发，并由 React 负责调度和渲染。useRef 在这里扮演的是“桥梁”角色，连接了稳定函数引用与动态状态变化之间的鸿沟。

综上所述，useRef 与 useReducer 的结合使用，不仅解决了函数闭包带来的值不同步问题，还提升了代码的健壮性和可维护性。在处理定时器、动画、WebSocket 连接、异步校验等需要访问最新状态的场景中，这种模式尤为实用。掌握这一技巧，能让开发者在构建复杂交互逻辑时更加得心应手，写出更可靠、更高效的 React 组件。