React Native -19.React Native Timer定时器的使用
背景:React Native Version:0.3.1
语法 ES6
Step1:介绍
RN的定时器就是一个创建方法。并没有像iOS一样的NSTimer类
根据官方提供的文档,定时器有四种形式: • setTimeout,clearTimeout
• setInterval,clearInterval
• setImmediate,clearImmediate
• requestAnimationFrame,cancelAnimationFrame
- 见名思义:set和request方法是创建。clear是清除,清除必须有.
Step1:使用
setTimeout(function,time)
function:触发的方法
time:延迟时间 毫秒
效果:延迟time时间后执行function,setInterval(function,time)
function:触发的方法
time:延迟时间 毫秒
效果:间隔time时间后执行functionsetImmediate(function,time)
function:触发的方法
time:延迟时间 毫秒
效果:间隔time时间后(立即)执行function,setImmediate此方法会在js代码块之行结束后执行,就在就要发送批量相应数据到原生之前,如过再方法中又掉用了此方法,他会立即呗掉用。而不会再掉用之前等待原生代码
以上这句话从官网文档翻译过来,等待以后实际验证。
Step2:实战
import React,{Component} from 'react';
import {AppRegistry,StyleSheet,ActivityIndicator} from 'react-native';
class hello extends Component {
constructor(props:any){
super(props);
var timer1=null;
var timer2=null;
var timer3=null;
this.state = {
animating: true,};
}
componentDidMount(){
this.timer1 = setInterval(
()=>{
this._consolelogshow();
},2000,);
this.timer2 = setTimeout(
()=>{console.log('setTimeout22222222'); },1000,);
this.timer3 = setImmediate(
()=>{console.log('setImmediate333333');},3000,);
}
componentWillUnmount() {
// 如果存在this.timer,则使用clearTimeout清空。
// 如果你使用多个timer,那么用多个变量,或者用个数组来保存引用,然后逐个clear
this.timer1 && clearInterval(this.timer1);
this.timer2 && clearTimeout(this.timer2);
this.timer3 && clearImmediate(this.timer3);
}
_consolelogshow(){
console.log('把一个定时器的引用挂在this上11111');
}
render(){
return(
<ActivityIndicator
animating={this.state.animating}
style={[styles.centerting,{height:80}]}
size="large"/>
)
}
}
var styles = StyleSheet.create({
centering: {
alignItems: 'center',justifyContent: 'center',padding: 8,}
});
AppRegistry.registerComponent('hello',()=>hello);
Step3:实战解读
- componentDidMount 在生命周期组件加载成功后的方法里创建三个定时器。
- constructor 方法中声明三个定时器变量,方便全局掉用
- componentWillUnmount 在生命周期组件将要移除的方法里清除定时器。避免crash
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。