使用SetInterval问题进行本机渲染

Question

我刚刚偶然发现了我的应用程序的性能问题。 我正在尝试使用setInterval()函数进行游戏循环，并使用this.forceUpdate()不断重新渲染我的游戏。 我也尝试使用this.setState()重新渲染，但他们都感觉一样。 现在，在我的游戏循环中，我不断更新蓝色方块的y位置（View）。 它移动了，但有点滞后。

我将setInterval()函数的间隔设置为1000/60来模拟60FPS，但是在我的应用程序中，它感觉就像是20.我也尝试将间隔设置为1，并且它很平滑，但它结果很多。 我得到了非常迷失方向的微小滞后尖峰。

我不认为this.forceUpdate()或this.setState()在我的场景中是正确的。

有没有其他方法可以做到这一点，以提高性能？

更新：我也使用了requestAnimationFrame()函数，但它仍然在重新渲染时断断续续。 是否有替代this.forceUpdate()或this.setState() ？ 我将如何延迟requestAnimationFrame()循环以使其以60FPS的速度运行？

感谢阅读，希望我们找到解决方案。

Answer 1

如果您坚持认为requestAnimationFrame不适合您的应用/游戏循环，我建议使用setTimeout over setInterval 。 原因是，如果一个循环迭代的时间超过16ms （1000至1060年）来执行，那么你会得到迭代重叠-另一迭代将开始，即使没有完成之前。 随着时间的推移，这将导致真正的问题，并可能导致口吃。

作为替代方案，请尝试以下（伪代码）：

doLoopIteration = () => {

    this.setState({ /* your mutation */ }, 
    () => { // This callback is fired after a component render caused by setState

        // Sechule next loop iteration in ~16ms. This approach protects
        // against the overlap issue mentioned above
        setTimeout(() => this.doLoopIteration(), 1000 / 60);
    })        
}

// Start the iteration
doLoopIteration()

有关setState回调的更多信息， 请参阅此文档 。 另外，请参阅此文档以获取有关基于setInterval的循环敏感的重叠问题的详细信息 。 希望有所帮助！

Answer 2

好吧，我想我已经设法根据你们这些人的建议制作了一个frankenstein代码。 这里是。

  componentDidUpdate() {
    setTimeout(() => {
      requestAnimationFrame(this.loop);
    }, 1000/60);
  }

  loop = () => {
    this.forceUpdate();
  }

我注意到性能实际上比我尝试过的所有其他方法都要好。 我认为这是setInterval / forceUpdate太重了。 还有另一种重新渲染我的应用/游戏的方法吗？ 也许绕过重新渲染功能？

Answer 3

如果有人想知道，你真的不应该在react-native的状态下做游戏代码。 相反，请将您的游戏代码写在react-native之外。 例如，react-native-canvas可以用图形方式绘制没有状态的东西！