跳至主要内容

计时器

计时器是应用程序的重要组成部分,React Native 实现了 浏览器计时器

计时器

  • setTimeout, clearTimeout
  • setInterval, clearInterval
  • setImmediate, clearImmediate
  • requestAnimationFrame, cancelAnimationFrame

requestAnimationFrame(fn)setTimeout(fn, 0) 不同 - 前者会在所有帧刷新后触发,而后者会尽快触发(在 iPhone 5S 上每秒超过 1000 次)。

setImmediate 在当前 JavaScript 执行块的末尾执行,在将批量响应发送回原生之前。请注意,如果您在 setImmediate 回调中调用 setImmediate,它将立即执行,不会在此期间返回到原生。

Promise 实现使用 setImmediate 作为其异步实现。

注意

在 Android 上进行调试时,如果调试器和设备之间的时间出现漂移;动画、事件行为等可能会无法正常工作或结果可能不准确。请通过在您的调试器机器上运行 adb shell "date `date +%m%d%H%M%Y.%S%3N`" 来更正此问题。在真实设备中使用需要 root 权限。

InteractionManager

构建良好的原生应用感觉如此流畅的原因之一是避免在交互和动画期间执行代价高昂的操作。在 React Native 中,我们目前存在一个限制,即只有一个 JS 执行线程,但您可以使用 InteractionManager 来确保长时间运行的工作安排在任何交互/动画完成后开始。

应用程序可以使用以下方法安排任务在交互后运行

InteractionManager.runAfterInteractions(() => {
// ...long-running synchronous task...
});

将其与其他调度替代方案进行比较

  • requestAnimationFrame(): 用于随时间推移动画化视图的代码。
  • setImmediate/setTimeout/setInterval(): 稍后运行代码,请注意这可能会延迟动画。
  • runAfterInteractions(): 稍后运行代码,而不会延迟活动动画。

触摸处理系统将一个或多个活动触摸视为“交互”,并将延迟 runAfterInteractions() 回调,直到所有触摸结束或被取消。

InteractionManager 还允许应用程序通过在动画开始时创建交互“句柄”并在完成时清除它来注册动画

const handle = InteractionManager.createInteractionHandle();
// run animation... (`runAfterInteractions` tasks are queued)
// later, on animation completion:
InteractionManager.clearInteractionHandle(handle);
// queued tasks run if all handles were cleared