本资料介绍在 React 环境中使用 Helios 的集成模式，适用于在 React 项目里构建 composition 的场景。
用途：把 Helios 的时间轴与帧状态接入 React 组件，在 canvas 上按当前帧绘制内容。
主要能力与做法：官方示例给出两条路径。其一，创建 useVideoFrame hook，用 useState 保存当前帧，并在 useEffect 中通过 helios.subscribe 订阅状态更新，返回取消订阅函数；hook 返回当前帧，从而触发组件重新渲染。其二，创建 Composition 组件，在组件外部初始化 Helios 单例（示例参数 duration: 10、fps: 30），调用 helios.bindToDocumentTimeline()，并在浏览器环境下挂到 window.helios 供渲染器或播放器使用；组件内用 useRef 获取 canvas 引用，在 useEffect 中取得 2D 上下文，按帧计算进度并绘制，依赖帧变化重绘。
性能优化：对于复杂场景，避免每一帧都更新 React state（会触发整个组件重新渲染）。可改用 useRef 保存帧配合动画循环，或在 subscribe 回调里直接以命令式方式更新 canvas，不触发 React 渲染。
限制与未提供信息：资料仅提供示例代码与模式说明，未给出安装命令、依赖包完整配置、兼容版本、渲染器与播放器的具体用法，也未涉及收费、平台与效果数据，这些内容暂未提供。示例中 import 的 @helios-project/core、useVideoFrame 路径等请按原样使用。