Faster, Higher, Stronger
更快,更高,更强

React Native中的InteractionManager

React Native中的InteractionManager允许你在交互/动画执行完毕后再执行计划中的耗时任务。InteractionManager的作用尤其体现在可以让JavaScript动画更流畅的运行。

App可以通过下面这种方式来将耗时任务安排在交互完成之后执行:

将它与其他类似的方法进行一个对比:

  • requestAnimationFrame():用于绘制一次动画;
  • setImmediate/setTimeout():延后执行代码,注意这可能会延迟动画;
  • runAfterInteractions():延后执行代码,这不会延迟当前处于活动状态的动画。

触控系统会将单点或多点触控视为一个“交互”(interaction),然后在等到所有触控都结束会被取消后再执行runAfterInteractions()回调函数。

InteractionManager也允许app在动画开始时通过创建交互“句柄”(interaction “handle”)来注册动画,然后在动画结束后清除该句柄。就像下面这样:

runAfterInteractions方法的入参可以是一个简单的回调函数,也可以是一个PromiseTask对象(该对象需要有一个返回Promise的gen方法)。如果入参是一个PromiseTask对象,那么这个任务(task)彻底完成(这里的彻底完成,是指这个任务代码中涉及到的异步代码里通过runAfterInteractions产生的其他任务也都完成)后才会执行任务队列中的后续任务。

默认情况下,队列中的任务会一次性地在setImmediate方法中通过一个循环全部执行掉。如果你调用setDeadline方法并传入一个正数,那么这些任务就会在指定的时间到达后再执行(借助setTimeout方法实现),这样就会阻塞队列中剩下的任务,并能够给触摸交互留出操作时间,好让app能更好地响应用户。

方法:

static runAfterInteractions(task)

待所有交互都完成后再执行给定的函数。该方法会返回一个可以取消的“promise”。

static createInteractionHandle()

通知管理器交互已经开始了。

static clearInteractionHandle(handle)

通知管理器交互已经结束了。

static setDeadline(deadline)

若入参为正数,会使用setTimeout来在eventLoopRunningTime达到指定时间(入参)后开始执行任务。若入参不是正数,则所有任务都会在setImmediate方法中一次性批量执行掉(默认行为)。

属性:

Events: CallExpression

addListener: CallExpression

参考:
  • https://facebook.github.io/react-native/docs/interactionmanager.html
赞(0) 打赏(金额可任意指定)
未经允许不得转载:峰间的云 » React Native中的InteractionManager

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏