如何解决因在 React 中循环浏览图像而导致速度变慢的问题？

Question

我目前正在循环浏览图像列表，目的是为酒吧上的灯光移动设置动画。 不幸的是，我没有使用 CSS，因为在我看来，对于我的设置来说，这种循环可能是最好的方法，但它似乎占用了大量资源，所以我想知道是否有解决这个问题的方法，或者我是否只需要更改所有内容. 下面是我正在使用的代码：

代码的帮助来自这里：

如何遍历图像数组并将它们呈现在 React 的组件中？

代码

    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]} />

该代码运行良好，然后应用程序变慢，因为似乎占用了更多资源。 检查网络工具我可以看到资源在增长（我的应用程序中的文件命名不同）：

有没有更好的方法来解决这个问题？ 或者也许是一种在每次调用后释放资源的方法？

Answer 1

我是给出反应答案的人:)

任何带有 setInterval 超时的东西都会变慢，特别是如果你使用 javascript 每 1 秒修改一次 dom，尤其是当它们是图像时。

每次调用 setInterval 时，浏览器都需要用下一张图像重新绘制容器，这种绘制可能会花费很多毫秒，但如果花费超过 16 毫秒（60fps），帧就会丢失，您的应用程序将开始变得迟钝。

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

 .lightbox { border: solid 3px black; display: inline-flex; padding: 10px 20px; justify-content: space-between; width: 200px; position: relative; margin-left: 24px; align-items: center; }.light { border: solid 3px black; border-radius: 50%; height: 15px; width: 15px; animation: blink 5s linear infinite; }.light:nth-child(2) { animation-delay: 1s }.light:nth-child(3) { animation-delay: 2s }.light:nth-child(4) { animation-delay: 3s }.light:nth-child(5) { animation-delay: 4s } @keyframes blink { 0% { background-color: orangered; } 19% { background-color: orangered; } 20% { background-color: transparent; } 100% { background-color: transparent; } }.lightbox::before, .lightbox::after { content: ""; border: solid 1.5px black; width: 20px; height: 0; position: absolute; }.li

 <div class="lightbox"> <div class="light"></div> <div class="light"></div> <div class="light"></div> <div class="light"></div> <div class="light"></div> </div>

随着时间的推移，这个片段不会滞后，最重要的是它不会阻塞线程。