缓存 Rive 文件

useRiveFile Hook 旨在组件内初始化和管理 RiveFile 实例。它根据提供的源参数（URL 或 ArrayBuffer）设置 RiveFile，并确保在组件卸载或输入变化时进行适当的清理，以避免内存泄漏。

此 Hook 的主要优势在于，它允许你创建一个可在多个组件间复用的 RiveFile 实例，无需每次都重新从 src URL 获取或从 buffer 重新加载。这通过消除冗余的网络请求和加载时间来提升性能，尤其在从同一源创建多个 Rive 实例时效果显著。

示例用法

以下是一个简化的示例，展示如何集成 useRiveFile Hook 以在多个组件间复用 RiveFile：

import React, { useState } from 'react';
import { useRiveFile } from '@rive-app/react-canvas';

// 自定义包装组件，用于显示 Rive 动画
const RiveAnimation = ({ riveFile }) => {
    const { RiveComponent } = useRive({
        riveFile: riveFile,
        autoplay: true
    });

    return <RiveComponent/>;
};

function App() {
const { riveFile, status } = useRiveFile({
    src: 'https://cdn.rive.app/animations/myrivefile.riv',
});

const [instanceCount] = useState(5); // 要渲染的 RiveAnimation 组件数量

if (status === 'idle') {
    return <div>空闲中...</div>;
}

if (status === 'loading') {
    return <div>加载中...</div>;
}

if (status === 'failed') {
    return <div>Rive 文件加载失败。</div>;
}

// 每个 RiveAnimation 组件都使用我们之前加载的 RiveFile，因此它只被获取和初始化一次
return (
    <div className="App">
        <header className="App-header">Rive 实例</header>
        <div className="rive-list">
        {Array.from({ length: instanceCount }, (_, index) => (
            <RiveAnimation key={`rive-instance-${index}`} riveFile={riveFile} />
        ))}
        </div>
    </div>
    );

}

export default App;