Javascript 如何解决React中图像循环速度减慢的问题？

我目前正在循环浏览一系列图像，目的是在一个条上设置灯光运动的动画。不幸的是，我没有使用CSS，因为在我看来，对于我的设置来说，这个循环可能是最好的方式，但它似乎占用了很多资源，所以我想知道是否有办法解决这个问题，或者我是否必须改变一切。下面是我正在使用的代码：

有关代码的帮助来自此处：

代码

    state = {
    bars:[bar1,bar2,bar3,bar4,bar5],
    activeImageIndex: 0
 };

 componentDidMount(){
   setInterval(()=>{
     let newActiveIndex = this.state.activeImageIndex===4 ? 0 : this.state.activeImageIndex+1     
     this.setState({
        activeImageIndex: newActiveIndex
     })
   }, 1000);


 }

 <Image src={this.state.bars[activeImageIndex]} />

状态={
酒吧：[酒吧1、酒吧2、酒吧3、酒吧4、酒吧5]，
activeImageIndex:0
};
componentDidMount（）{
设置间隔（（）=>{
让newActiveIndex=this.state.activeImageIndex==4？0:this.state.activeImageIndex+1
这是我的国家({
activeImageIndex:newActiveIndex
})
}, 1000);
}

代码在一段时间内运行良好，然后随着更多资源似乎被占用，应用程序的运行速度减慢。检查网络工具，我可以看到资源在增长（在我的应用程序中，文件的名称不同）：

---

有没有更好的办法？或者是一种在每次通话后释放资源的方法

我就是给出答案的人：）

设置间隔超时的一切都会变慢，特别是如果您使用javascript每1秒修改一次dom，尤其是当它们是图像时

每次调用setInterval时，浏览器都需要用下一幅图像重新绘制容器，这种绘制可能需要花费很多毫秒，但如果花费超过16ms（60fps），帧将被删除，应用程序将开始变得滞后

这就是为什么动画之王是：CSS

.lightbox{
边框：纯色3px黑色；
显示：内联flex；
填充：10px 20px；
证明内容：之间的空间；
宽度：200px；
位置：相对位置；
左边距：24px；
对齐项目：居中；
}
.光{
边框：纯色3px黑色；
边界半径：50%；
高度：15px；
宽度：15px；
动画：闪烁5s线性无限；
}
.灯光：第n个孩子（2）{
动画延迟：1s
}
.灯光：第n个孩子（3）{
动画延迟：2秒
}
.灯光：第n个孩子（4）{
动画延迟：3s
}
.灯光：第n个孩子（5）{
动画延迟：4s
}
@关键帧闪烁{
0% {
背景颜色：橙色；
}
19% {
背景颜色：橙色；
}
20% {
背景色：透明；
}
100% {
背景色：透明；
}
}
.lightbox：：之前，
.灯箱：：之后{
内容：“；
边框：实心1.5px黑色；
宽度：20px；
身高：0；
位置：绝对位置；
}
.li