我正在制作一个React页面，其中包含飞来飞去的SVG图片。屏幕上大约有500幅SVG图像，当我将鼠标悬停在这些图像上时，它们会从光标处反弹。但是，由于渲染500幅SVG图像（更不用说动画）是一项艰巨的任务，因此我想知道哪种是构建这种性能的最佳方法。
假设有两个组成部分：容器和SVG图片。
我已经经历了几种方法：
每个SVG都是无状态组件，我们操纵容器中的悬停和弹跳，将新坐标通过props传递给SVG。例如，我们在容器状态下将信息（即x和y坐标）存储为数组，并在需要时侦听游标坐标以检查和更改状态内数组中的坐标。对于每个渲染，我们使用良好的ol'map函数将数组映射到无状态组件中。在这种情况下，尽管悬停响应速度非常快，但我们需要在每个渲染中渲染500个SVG。 （或者是吗？）
每个SVG都用作有状态组件，并使用来存储坐标。鼠标悬停时，它将计算应该反弹到的坐标并更新其自身的状态。在这种情况下，它仅呈现已悬停的SVG。但是性能不如预期。
每个SVG都充当无状态组件，但是带有钩子，并且执行方法2一样。我想知道有状态组件是否过重，因此我尝试了一下。它也没有做太多的改进。 （好像有状态/无状态组件的基础代码是一样的？）
对于这3种方法，它在大约150个SVG上运行非常平稳，图像在0.2秒内从光标处反弹。当SVG的数量增加到300左右时，动画开始变得反应迟钝和缓慢。
我想知道如何改善这种SVG动画的渲染性能。