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时间后执行function

• setImmediate(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