reactjs – 在React中使用requestAnimationFrame

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

My Touch事件非常慢,我经历了RN documentation on performance,他们已经提到过在这个例子中使用requestAnimationFrame

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是针对相同挑战的解决方案,无论是在您的网络浏览器还是iOS或Android中.他们都在一遍又一遍地完成这个画面的过程.你可以开始计算下一次重绘所需的东西,但是开始得太晚,所以当下次重绘时没有完成.

想象一下,你的动画很流畅,但你的手机突然收到了20次推送通知,导致CPU停滞不前,造成动画延迟16.7毫秒. requestAnimationFrame不是在错误的时间将像素显示在正确的位置,而是通过在正确的时间使像素处于正确的位置来帮助,但它可能会做一些魔术,甚至有时甚至不会尝试绘制像素. ,从而节省了性能并增加了感知的平滑度.

我刚刚意识到这是一面文字,但我认为它将是信息性的.

这些重绘大约每秒发生60帧,因此requestAnimationFrame在计算最佳时间时可以每秒发射60次. 1秒内有1000毫秒,因此60 FPS是每16.7ms一帧.如果人眼在20FPS时感觉到平滑,那么这意味着你可以在理论上每45毫秒或30％重绘一次,并且动画仍然是平滑的.

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