定时器
定时器是应用程序的重要组成部分,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
来确保耗时任务在任何交互/动画完成后开始执行。
应用程序可以使用以下方法在交互后调度任务执行
tsx
InteractionManager.runAfterInteractions(() => {
// ...long-running synchronous task...
});
将其与其他调度方案进行比较
- requestAnimationFrame():用于随时间动画视图的代码。
- setImmediate/setTimeout/setInterval():稍后运行代码,请注意这可能会延迟动画。
- runAfterInteractions():稍后运行代码,不会延迟正在进行的动画。
触摸处理系统将一个或多个活跃的触摸视为一次“交互”,并将延迟 runAfterInteractions()
回调,直到所有触摸结束或被取消。
InteractionManager 还允许应用程序通过在动画开始时创建一个交互“句柄”,并在完成后清除它来注册动画。
tsx
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