最佳实践

通用 Rive 最佳实践

跨平台适用的设计时和运行时指南。

避免不必要的重新渲染

使用 useRive 时，请将 hook 及其返回的 <RiveComponent /> 放在一个专用的包装组件中。

Rive 会在组件挂载时创建一个实例，该实例与底层的 <canvas> 元素绑定。如果 React 反复卸载或重建该 canvas，动画可能会重新开始、消失或无法按预期显示。

function RiveAnimation() {
  const { RiveComponent } = useRive({
    src: '/animation.riv',
    stateMachine: 'State Machine 1',
  });

  return <RiveComponent />;
}