RN组件生命周期

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {

  state = {
    count:30
  };

  render() {
    const count = this.state.count;
    return (
      <Text>
        {count}
      </Text>
    );
  }

  componentDidMount(){
    this.timer = setInterval(()=>{
      const count = this.state.count;
      if (count === 0) {
        return clearInterval(this.timer);
      };
      this.setState({
        count:count - 1
      });
    },1000);
  }

  componentWillUnmount(){
    clearInterval(this.timer);
  }

}

• 插播：判断语句的三种写法

renderResult = ()=>{
    const count = this.state.count;

    // 常规写法
    if (count > 0) {
      return <Text>{count}</Text>
    }else{
      return <Text>时间到！</Text>
    }

    // 三目运算表达式写法
    return count > 0 ? <Text>{count}</Text> : <Text>时间到！</Text>

    // 运算符&&写法 不满足条件直接消失

    return count > 0 &&  <Text>{count}</Text>
  };

• 总结

image.png

什么时候用Props？什么时候用state?

• 初始值用 props 作为state的初始值 如果主控件修改了props的初始值，那么子控件则通过用来捕捉变化的props的专用方法修改

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};

class CountDown extends Component<Props> {


  state = {
    count:this.props.time
  };

  // 因为主组件修改了props的time1的值是延迟执行的，但是这里并不知道修改了。所以我们需要把props的变动同步到state上
  componentWillReceiveProps(nextProps){
    this.setState({
      count:nextProps.time
    })
  }

  renderResult = ()=>{
    const count = this.state.count;

    // 常规写法
    if (count > 0) {
      return <Text>{count}</Text>
    }else{
      return <Text>时间到！</Text>
    }

    // 三目运算表达式写法
    // return count > 0 ? <Text>{count}</Text> : <Text>时间到！</Text>

    // 运算符&&写法 不满足条件直接消失

    // return count > 0 &&  <Text>{count}</Text>
  };

  render() {
    const count = this.state.count;
    return (
      <View>
      {this.renderResult()}
      </View>
    );
  }

  componentDidMount(){
    this.timer = setInterval(()=>{
      const count = this.state.count;
      if (count === 0) {
        return clearInterval(this.timer);
      };
      this.setState({
        count:count - 1
      });
    },1000);
  }

  componentWillUnmount(){
    clearInterval(this.timer);
  }
}

// 主组件
export default class App extends Component<Props> {

  // 设置主组件的初始值
  state = {
    time1:10,
    time2:20,
  }

  // 2秒钟之后修改time1初始值为30 视图将要展示的时候处理
  componentWillMount(){

    // 使用一次性的定时函数设置2秒的延迟执行 用来看清楚整个过程
    setTimeout(()=>{
      this.setState({
      time1:30,
      })
    },2000)
  }

  render() {
    return (
      <View>
        <CountDown time = {this.state.time1}/>
        <CountDown time = {this.state.time2}/>
      </View>
    );
  }

}

RNLife.gif