React Native -19.React Native Timer定时器的使用

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