- 第1节:React 入门
- 第2节:React 安装 Android 运行环境
- 第3节:React Native 样式
- 第4节:React Native 手势应答系统
- 第5节:React Native 辅助功能
- 第6节:React Native 模块(iOS)
- 第7节:React Native UI 组件(iOS)
- 第8节:React Native UI 组件(Android)
- 第9节:React Native 调试 React Native 应用
- 第10节:React Native 测试
- 第11节:React Native 在设备上运行
- 第12节:React Native 在设备上运行(Android)
- 第13节:React Native 与现有的应用程序集成
- 第14节:React Native JavaScript 环境
- 第15节:React Native 已知 Issues
- 第16节:React Native iOS 活动指示器
- 第17节:React Native iOS 日期选择器
- 第18节:React Native DrawerLayoutAndroid
- 第19节:React Native 图片
- 第20节:React Native 列表视图
- 第21节:React Native Map 视图
- 第22节:React Native 导航器
- 第23节:React Native iOS 导航器
- 第24节:React Native iOS 选择器
- 第25节:React Native ProgressBarAndroid
- 第26节:React Native 滚动视图
- 第27节:React Native iOS 滑块
- 第28节:React Native SwitchAndroid
- 第29节:React Native iOS 开关
- 第30节:React Native iOS 选项卡
- 第31节:React Native TabBarIOS.Item
- 第32节:React Native 文本
- 第33节:React Native 文本输入
- 第34节:React Native ToolbarAndroid
- 第35节:React Native 高亮触摸
- 第36节:React Native 不透明触摸
- 第37节:React Native 无反馈触摸
- 第38节:React Native 视图
- 第39节:React Native Web 视图
- 第40节:React Native iOS 警告
- 第41节:React Native 应用程序注册表
- 第42节:React Native iOS 应用程序状态
- 第43节:React Native 异步存储
- 第44节:React Native BackAndroid
- 第45节:React Native 相机滚动
- 第46节:React Native 交互管理器
- 第47节:React Native 动画布局
- 第48节:React Native iOS 链接
- 第49节:React Native 网络信息
- 第50节:React Native 全景响应器
- 第51节:React Native 像素比率
- 第52节:React Native iOS 推送通知
- 第53节:React Native iOS 状态栏
- 第54节:React Native 样式表
- 第55节:React Native ToastAndroid
- 第56节:React Native iOS 震动
- 第57节:React Native Flexbox
- 第58节:React Native 定位
- 第59节:React Native 网络
- 第60节:React Native 计时器
React Native 计时器
计时器是一个应用程序的重要的一个组成部分,React Native 实现了Browser timers。
计时器setTimeout,clearTimeout
setInterval, clearInterval
setImmediate, clearImmediate
requestAnimationFrame, cancelAnimationFrame
setTimeout,clearTimeout
setInterval, clearInterval
setImmediate, clearImmediate
requestAnimationFrame, cancelAnimationFrame
requestAnimationFrame(fn)
相当于 setTimeout(fn, 0)
,他们是在刷新屏幕之后被正确触发。
setImmediate
是在向本地发送批处理相应之前,当前 JavaScript 执行块结束时执行的。注意,如果你在一个回调函数setImmediate
之内调用 setImmediate
,它将立即被执行,而且不会返回到本地之间。
这个 Promise
的实现是将 setImmediate
作为异步性的开端。
交互管理器
良好的原生应用可以用起来感觉很顺利的一个原因是在交互和动画方面避免了复杂的操作。在 React Native,目前我们有一个限制,只有一个JS执行线程,但是你可以使用 InteractionManager
来确保在任一交互或者动画完成之后,长期的运行工作的开始是被规划好的。
在下面的交互完成之后,应用程序可以安排任务来运行:
InteractionManager.runAfterInteractions(() => { // ...long-running synchronous task...
});
与其他调度方案相比:
requestAnimationFrame():代码是在时间上的一个动画视图
setImmediate/setTimeout/setInterval():运行代码之后,请注意这可能会延迟动画
runAfterInteractions():运行代码之后,没有延迟的动态动画
触发处理系统将一个或多个触发看作是一个“交互”,并且将runAfterInteractions()
延迟回调,直到所有的触发都已结束或者被取消。
交互管理器还允许应用程序通过对动画的开始创建一个交互“处理”来注册动画,并且完成之后进行清理:
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
,那么你可以用 this.setTimeout(fn, 500)
(只是加上 this.
)来替换 setTimeout(fn, 500)
函数的调用,并且当组件被卸载时,一切都会被清理干净。
var TimerMixin = require('react-timer-mixin'); var Component = React.createClass({ mixins: [TimerMixin], componentDidMount: function() { this.setTimeout( () => { console.log('I do not leak!'); }, 500
);
}
});
我们强烈建议不用只单独使用 Timers,而是一直使用 mixin,这样将会为你节省很多很难追踪的bugs。