Timers

定时器是应用程序的重要组成部分，React Native实现浏览器定时器。

计时器

setTimeout，clearTimeout

setInterval, clearInterval

setImmediate, clearImmediate

requestAnimationFrame, cancelAnimationFrame

requestAnimationFrame(fn)不一样setTimeout(fn, 0)- 前者会在所有帧被冲洗后触发，而后者将尽快触发（iPhone 5S每秒超过1000倍）。

setImmediate在当前JavaScript执行块的末尾执行，在将批处理响应发送回本机之前执行。请注意，如果你setImmediate在setImmediate回调中调用，它将立即执行，它不会退回到原始状态。

该Promise实现使用setImmediate它的异步性原语。

interactionManager

为什么构建好的本地应用程序感觉如此流畅的原因之一是避免了在交互和动画过程中的昂贵操作。在React Native中，我们目前有一个限制，即只有一个JS执行线程，但您可以使用它InteractionManager来确保长时间运行的工作计划在任何交互/动画完成后启动。

应用程序可以安排任务在与以下内容交互之后运行：

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

将此与其他调度方案进行比较：

requestAnimationFrame（）：用于随时间变化动画视图的代码。

setImmediate / setTimeout / setInterval（）：稍后运行代码，注意这可能会延迟动画。

runAfterInteractions（）：稍后运行代码，而不延迟活动动画。

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

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

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

TimerMixin

我们发现使用React Native创建的应用程序中致命的主要原因是由于定时器在组件卸载后触发。为了解决这个反复出现的问题，我们介绍了TimerMixin。如果你有TimerMixin，那么你可以更换您的通话setTimeout(fn, 500)用this.setTimeout(fn, 500)（只是在前面加上this.），一切都将被妥善清理你当组件卸除。

该库不附带React Native - 为了在您的项目中使用它，您需要npm i react-timer-mixin --save从项目目录中安装它。

import TimerMixin from 'react-timer-mixin';

var Component = createReactClass({
  mixins: [TimerMixin],
  componentDidMount: function() {
    this.setTimeout(
      () => { console.log('I do not leak!'); },
      500
    );
  }
});

这将消除很多艰难的工作来追踪错误，例如组件卸载后超时引发的崩溃。

请记住，如果您为React组件使用ES6类，则不存在用于mixin的内置API。要使用TimerMixinES6类，我们推荐react-mixin。

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18