Reactjs React中的Lottie动画在重新渲染时导致内存泄漏/浏览器冻结

我使用Lottie在带有React路由器的基本Create React应用程序的页面上显示动画。当我浏览页面并再次进入带有动画的页面时，动画加载速度越来越慢，导致浏览器在多次重新访问页面后冻结，我无法解释原因

在我的理解中，在卸载时销毁动画应该足以销毁整个实例，还是我错了

这是动画组件：

import React from 'react';
import lottie from 'lottie-web';
import sketchAnim from './sketchAnim.json';

const AnimSketch: React.FC = () => {
  const elem = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    const anim = lottie.loadAnimation({
      animationData: sketchAnim,
      loop: true,
      renderer: 'svg',
      container: elem.current,
      autoplay: true,
    });

    return () => {
      anim.destroy();
    }
  }, []);

  return (
    <div ref={elem} className="inset-0 absolute"></div>
  );
}

export default AnimSketch;

从“React”导入React；
从“乐天网”导入乐天；
从“./sketchAnim.json”导入sketchAnim；
常量：React.FC=（）=>{
const elem=React.useRef（null）；
React.useffect（（）=>{
const anim=lottie.loadAnimation({
animationData:sketchAnim，
循环：对，
渲染器：“svg”，
容器：elem.current，
自动播放：对，
});
return（）=>{
破坏动物；
}
}, []);
返回(
);
}
导出默认动画草图；

您确定没有父组件导致重新渲染您的AnimSketch组件吗？@RajenderJoshi是的，并且重新渲染不应该影响动画或重新启动动画，因为效果仅在装载时运行：SMakes sense，我也看不到您的组件中有任何错误。您是否可以在effect或component主体中添加一个调试器，以保证任何重播者。我曾经处理过500-600kb的洛蒂动画文件，这些文件都有问题。@RajenderJoshi该效果只有在我重新进入路线时才执行。哦，当我在

destroy

之前调用

anim.stop（）

时，它工作得很好，所以我认为在lotties destroy方法中实际上可能存在一个bug，它不会杀死一些事件。谁知道收拾残局会把一切搞得一团糟。