example-react

用途\n该技能面向在 React 环境中集成 Helios 构建组合（composition）的场景，提供可复用的代码组织模式：用 React Hook 订阅 Helios 状态、用 Ref 获取 canvas 上下文并绘图。\n\n主要能力与使用方式\n资料给出的做法分为两步。第一步创建 useVideoFrame Hook：用 useState 保存来自 helios.currentFrame.peek() 的初始帧，在 useEffect 中调用 helios.subscribe 订阅状态更新，将 state.currentFrame 写入状态，并返回取消订阅函数，从而实现帧变化触发重渲染。第二步创建组合组件：在组件外初始化 Helios 单例（示例配置 duration: 10、fps: 30），调用 bindToDocumentTimeline()，并在浏览器环境下挂到 window.helios 供渲染器或播放器使用；组件内用 useRef 引用 canvas，用 useVideoFrame 获取当前帧，在 useEffect 中依据帧计算进度并绘制。\n\n性能优化\n资料指出，复杂场景应避免每一帧都触发 React 状态更新，因为那会导致整个组件重渲染。替代方案是用 useRef 保存帧并配合动画循环，或直接在 helios.subscribe 回调中命令式绘制 canvas，资料给出了订阅后直接调用 drawScene(ctx, state.currentFrame) 的示例。\n\n适用场景与限制\n适用于使用 Helios 与 React 制作 canvas 动画或视频组合的开发者。资料仅提供示例代码与性能建议，具体 API 细节、依赖版本、安装步骤、收费与平台支持等暂未提供。相关示例文件路径为 examples/react-canvas-animation/。