Question

我刚刚偶然发现了我的应用程序的性能问题。我正在尝试使用AttributeError: 'float' object has no attribute 'dtypes'函数进行游戏循环，并使用setInterval()不断地重新渲染我的游戏。我也尝试过使用this.forceUpdate()重新渲染，但是它们的感觉都一样。现在，在我的游戏循环中，我不断更新蓝色正方形（视图）的y位置。它移动了，但是有点滞后。

我将this.setState()函数的间隔设置为1000/60以模拟60FPS，但是在我的应用中，感觉像是20。我还尝试将间隔设置为1，它很平滑，但是口吃很多。我出现了微小的滞后尖峰，这非常令人迷惑。

我认为setInterval()或this.forceUpdate()在我的情况下不正确。

还有其他方法可以使性能更好吗？

更新：我也使用了this.setState()函数，但是在重新渲染时仍然结结巴巴。有requestAnimationFrame()或this.forceUpdate()以外的替代方法吗？我该如何延迟this.setState()循环使其以60FPS的速度消失？

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

Answer 1

如果您坚决认为requestAnimationFrame不适合您的应用/游戏循环，建议您在setTimeout上使用setInterval。原因是，如果执行循环迭代所需的时间比16ms（1000/60）要长，那么您将获得迭代重叠-即使先前的迭代尚未完成，也将开始另一个迭代。随着时间的流逝，这将导致真正的问题，并可能导致口吃。

或者，尝试以下操作（伪代码）：

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回调的更多信息，see this documentation。另外，关于基于setInterval的循环很敏感的重叠问题，请参见this documentation for details。希望有帮助！

Answer 2

好的，我想我已经根据你们的建议制作了一个弗兰肯斯坦密码。在这里。

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

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

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

Answer 3

如果有人想知道，那么您实际上不应该在react-native的状态下编写游戏代码。而是在react-native之外编写您的游戏代码。例如，react-native-canvas可以以图形方式绘制没有状态的东西！

使用SetInterval问题进行本机渲染

3 个答案: