React 运行时（React）
概览（Overview）
React Runtime 提供：
- 可直接渲染的 React 组件
- 一组 hooks（含类型）
- 对 Web Runtime 的 React 友好封装
源码：
快速开始
1) 安装依赖
根据渲染器选择：
- 推荐：
@rive-app/react-webgl2（Rive Renderer） @rive-app/react-canvas（Canvas 路径）@rive-app/react-canvas-lite（体积更小，但功能受限）
npm i --save @rive-app/react-webgl2
2) 渲染基础组件
import Rive from '@rive-app/react-webgl2';
export const Simple = () => (
<Rive
src="https://cdn.rive.app/animations/vehicles.riv"
stateMachines="bumpy"
/>
);
更多参数请看：
3) 使用 useRive 获取实例
当你需要控制 播放、监听事件、改文本等，建议用 useRive：
import { useRive } from '@rive-app/react-webgl2';
export default function Simple() {
const { rive, RiveComponent } = useRive({
src: 'https://cdn.rive.app/animations/vehicles.riv',
stateMachines: 'bumpy',
autoplay: false,
});
return (
<RiveComponent
onMouseEnter={() => rive && rive.play()}
onMouseLeave={() => rive && rive.pause()}
/>
);
}
注意（Note）：
RiveComponent渲染后才会真正实例化 Rive（需要 canvas 已进入 DOM）。
渲染注意事项
如果你会条件渲染 RiveComponent，建议把 useRive 封装在独立子组件中，减少反复卸载/挂载导致的重置或不显示问题。