在React中使用requestAnimationFrame

我是新手,我会尝试优化性能.

我的触摸事件非常缓慢,我正在通过RN文档了解性能,他们已经提到要使用requestAnimationFrame此示例

handleOnPress() {
  // Always use TimerMixin with requestAnimationFrame, setTimeout and
  // setInterval
  this.requestAnimationFrame(() => {
    this.doExpensiveAction();
  });
}

现在,这个描述听起来很模糊,很难让我理解它的用法

就像,我在我的RN应用程序中有这个可触摸的事件

 this.touched(this.props.coinShortName)}>

哪个叫这个方法

 touched = (id) => {

        this.setState({selectedPostId: id})
        if (this.props.coinShortName == this.state.selectedPostId ) { 
           this.setState({stateToDisplay: !this.state.stateToDisplay})
        }
    }

[问题:]有人可以告诉我如何在应用程序中使用它/应该使用它吗？

我将把我的评论转换成答案，以便我可以更好地设置其格式，并希望将来对某人有所帮助。我不明确建议将答案标记为正确，但我认为此答案应与该问题一起出现。

本文应该为您提供一些背景资料requestAnimationFrame：http : //www.Javascriptkit.com/javatutors/requestanimationframe.shtml。

我建议阅读上面链接的文章，然后再阅读我的答案。

我会明确提到，requestAnimationFrame它看起来可能与相似setTimeout(() => {}, 0)，但是如果您是1985年生产的Zack Morris手机，则其“尽快”可能会在5秒钟后出现，从而使动画看起来很糟糕，类似于您的角色滞后时视频游戏中的屏幕。该函数可能已在正确的时间被调用，但实际上并未在正确的时间执行。

设想收集阶段和渲染阶段可能会有所帮助。对不起，我不知道这些东西的确切术语，但是我认为在20 FPS时人眼可以看到平稳的运动，但这意味着您有20个“帧”，所以就像计算20次。这就像收集一群孩子，然后每秒将他们推入公交车20次。将它们推入总线是一个事件，它类似于重新绘制屏幕。有时，孩子们可能会被抛在后面，而下次还会有更多的孩子来接孩子，因此您可以想象随着时间的流逝，人们对流动的顺畅感会有所提高。

重要的是要注意，正在针对下一次重绘或下一次屏幕“更改”进行优化。requestAnimationFrame确实在引擎盖下工作以确保动画在正确的时间发生并且平滑，这意味着像素位于正确的时间。（我认为，如果您查看“什么是简陋的动画”的定义，并查看有关该主题的一些讨论，您将会得到很多含义。之所以提及，是因为我们想了解更多有关重新绘制过程以及什么内容的信息。事情很重要，为什么）

我记得这requestAnimationFrame会抛弃可能为时已晚的计算。例如，如果单击该按钮，则像素从0％到25％到50％到75％到100％（某些任意距离计算）。我们可以说1秒钟之后，像素应该移动了50％的距离，而2秒钟之后，像素应该到达了100％的最终静止位置。

更重要的是，像素必须在正确的时间放置在正确的位置，而不是将像素精确地移动到应该到达的每个位置。requestAnimationFrame正在帮助您做到这一点。如果屏幕将要重新粉刷，并且“它”需要运行会花费很长时间的计算，则“它”将忽略它并跳到下一帧。这就像修剪脂肪以保持步调一致，因此请避免过时。

requestAnimationFrame是针对相同挑战的解决方案，无论是在您的Web浏览器中还是在iOS或Android中。他们都反复进行绘制屏幕的过程。您可以开始计算下一次重画所需的内容，但是开始得太晚了，因此在下一次重画发生时还没有完成。

假设您的动画很流畅，但是您的手机突然收到20条推送通知，使CPU陷入瘫痪，从而使动画延迟了16.7 milliseconds。可以在正确的时间将像素放置在正确的位置上，而不是在错误的时间requestAnimationFrame将像素显示在正确的位置上，但这样做可能会产生一些魔力，甚至有时甚至不会尝试绘制像素，从而节省了性能并增加了感知的平滑度。

我只是意识到这是一堵文字墙，但是我认为这将是信息性的。

这些重绘每秒大约发生60帧，因此requestAnimationFrame在计算出最佳时间时可能每秒发生60次闪光。1秒有1000毫秒，因此60 FPS每1帧16.7ms。如果人眼感知到20FPS的平滑度，则意味着理论上您可以每45毫秒或30％进行一次重绘，并且动画仍将是平滑的。

我的定义可能不准确，但是我希望它们可以帮助您了解正在发生的事情。