React useState状态值在动画帧间未保留 发送分数始终为0

这是React Hooks场景下非常典型的**陈旧闭包（Stale Closure）**问题，在requestAnimationFrame动画循环、跨组件事件订阅这类长生命周期回调里极易触发：

• 组件首次渲染时你注册的动画帧回调、分数更新事件监听，捕获的是当次渲染上下文中的score初始值0
• 后续setScore触发组件重渲染时，之前已经注册的回调不会自动更新上下文中的状态引用，始终持有第一次渲染时的旧值
• 游戏结束触发提交逻辑时，回调读取的自然就是闭包里缓存的旧值0，和你实际更新到的分数完全不同步

根据贪吃蛇游戏的场景特性，按优先级给三个可直接落地的方案：

方案1：useRef同步最新状态（最适配游戏/高频事件场景） #

useRef的.current属性不会被闭包缓存，永远能拿到最新值，改造成本最低，也是游戏类场景的首选方案：

// 原有useState逻辑保留，额外新增ref做值同步
const [score, setScore] = useState(0);
const scoreRef = useRef(0);

// 每次score状态更新，同步写入ref
useEffect(() => {
  scoreRef.current = score;
}, [score]);

// 所有动画帧回调、事件订阅回调、游戏结束提交逻辑中，读取分数统一用scoreRef.current
const handleGameOver = () => {
  // 这里拿到的永远是最新分数，不会出现固定为0的问题
  submitGameData({ score: scoreRef.current });
};

注意：如果分数累加逻辑写在动画帧回调中，setScore请统一用函数式更新写法setScore(prev => prev + addValue)，不要直接依赖闭包中的score计算新值，避免更新丢步。

方案2：正确声明useEffect依赖，回调随状态更新重绑定 #

如果你的分数是通过跨组件事件订阅获取的，可以把事件绑定、动画帧启动逻辑放到useEffect中，正确声明依赖项，每次状态变化时清理旧回调、绑定新回调：

useEffect(() => {
  const handleScoreUpdate = (newVal) => {
    setScore(newVal);
  };
  // 绑定分数更新事件
  eventBus.on('score:update', handleScoreUpdate);
  // 启动动画循环
  const rafId = requestAnimationFrame(gameLoop);

  return () => {
    // 重绑前必须清理旧监听、旧动画帧，避免内存泄漏和重复触发
    eventBus.off('score:update', handleScoreUpdate);
    cancelAnimationFrame(rafId);
  };
}, [score]); // 将score加入依赖数组

这个方案不适合贪吃蛇这类高频更新的游戏：每次分数变化就重绑事件、重启动画帧会带来不必要的性能开销，仅适合低频交互场景。

方案3：避免在长生命周期回调中直接读取外层状态 #

如果你的游戏结束逻辑是直接在动画帧判断触发的，不要在回调中直接读取外层的score变量，要么配合方案1的ref取值，要么把提交逻辑抽到useEffect里监听游戏结束状态：

const [isGameOver, setIsGameOver] = useState(false);

// 监听游戏结束状态，状态变更时在当前渲染上下文中拿最新score提交
useEffect(() => {
  if (isGameOver) {
    submitGameData({ score });
    // 提交后做重置逻辑
  }
}, [isGameOver, score]);

直接去核心文件里搜这几个点，基本可以快速定位问题：

• 检查requestAnimationFrame回调、分数事件监听是不是只在组件首次挂载时注册过，从未做过清理重绑
• 检查回调中读取score时，是不是直接拿的组件外层解构出来的score变量
• 检查setScore更新是不是直接传入了依赖闭包score计算的值，没有用函数式更新
• 检查传给子组件/事件系统的游戏结束回调，是不是没有用useCallback包裹、且没有把score加入依赖项，导致回调始终持有旧的score引用

内容的提问来源于stack exchange，提问作者Ren