React 游戏循环 Hooks

React Game Loop Hooks 生产级自定义 React hooks，基于 requestAnimationFrame 实现游戏循环与动画。

安装 将 hook 文件复制到项目：

# 在 skill 目录下
cp /assets/hooks/useGameLoop.ts src/hooks/

为你的 OpenClaw skill 安装目录。

依赖 React ≥ 16.8（支持 hooks） TypeScript ≥ 4.0（类型安全） react-dom ≥ 16.8（浏览器环境 requestAnimationFrame 类型） 仅限浏览器使用 —— 依赖 requestAnimationFrame，Node.js 或 SSR 环境不可用。

API 参考 useGameLoop(options)

import { useGameLoop } from './hooks/useGameLoop';

参数：

选项	类型	默认值	说明
onFrame	(deltaTime: number, elapsedTime: number) => void	—	每帧调用，传入增量（ms）与累计时间（ms）。必填。
maxDeltaTime	number	100	最大增量截断（ms），防止切页或卡顿后跳跃。

返回：

字段	类型	说明
start	() => void	启动循环
stop	() => void	停止循环
isRunning	boolean	当前运行状态

模式 闭包安全 在异步/闭包（如 requestAnimationFrame、setInterval、事件监听）中用 useRef 读取回调/状态，并在 useEffect 中同步。

const cbRef = useRef(onFrame);
useEffect(() => { cbRef.current = onFrame; }, [onFrame]);

卸载清理 useEffect 必须返回清理函数。RAF/定时器句柄存 ref，卸载时取消。

useEffect(() => {
  const id = requestAnimationFrame(tick);
  return () => cancelAnimationFrame(id);
}, []);

错误容错 用户回调用 try/catch 包裹，避免错误破坏内部循环状态。

try { callbackRef.current(delta, elapsed); }
catch (err) { console.error('hook callback error:', err); }

增量截断 游戏循环中截断 deltaTime，避免切页或卡顿后跳跃。

const delta = Math.min(rawDelta, maxDeltaTime);

示例 完整用法见 assets/examples/GameTimer.tsx，展示累计时间与 FPS 显示。

参考 assets/hooks/useGameLoop.ts — 基于 requestAnimationFrame 的游戏循环，支持 start/stop/isRunning 控制、增量截断、错误容错 assets/examples/GameTimer.tsx — 基础用法示例