在React中使用requestAnimationFrame

  • Z时代
  • 2024-01-10
  • 分类：问答

我是本机反应的新手，我正在尝试优化性能。

我的Touch事件非常缓慢，我正在查看有关性能的RN文档，并且提到

了该示例

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

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

就像，我的RN应用中有这个可触摸的事件

<TouchableWithoutFeedback   onPress={() => 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％进行一次重绘，并且动画仍将是平滑的。

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

以上是 在React中使用requestAnimationFrame 的全部内容， 来源链接： utcz.com/qa/429707.html

回到顶部