RN组件的生命周期

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

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

import TouchComment from './TouchComment'

var Dimensions =require('Dimensions');
var {width, height}=Dimensions.get('window');


export default class Lift extends Component<{}> {

    static defaultProps(){
        //1、为组件设置默认的属性
        console.log('defaultProps')
    }

    constructor(props) {
        super(props)
        //2
        console.log('constructor')

        this.state={
            count:0,
            remove:false  //标识是否组件被移除   用来测试组件的卸载的生命周期
        }

    }


    componentWillMount() {
        //转载前调用的方法
        //3
        console.log('componentWillMount')
    }


  render() {
        //4、进行渲染

      //看看是否移除。 如果移除返回null  没有移除的话则返回这个组件
      var view =this.state.remove?null:<TouchComment/>
      var text=this.state.remove?'让控件显示':'让控件隐藏'

      console.log('render')
    return (
        <View style={styles.container}>
            <Text onPress={()=>{
                 this.setState({
                     count:this.state.count+1
                 })
            }}>
                测试山居
            </Text>
            <Text>被点击了多少{this.state.count}次了</Text>


            <Text
                onPress={()=>{
                    this.setState({
                        remove:!this.state.remove
                    })
                }}
            >{text}</Text>

            {view}

        </View>
    );
  }

    componentDidMount() {
        //5、渲染完成啦
        console.log('componentDidMount')
    }


    /**
     * 当state的状态变化的时候
     */
    shouldComponentUpdate() {
        //6 当state的状态变化的时候 进行触发
        console.log('shouldComponentUpdate')
        return true; //当返回true的时候就行触发后面的生命周期。当返回时false的时候不会触发后面的生命周期。
    }

    componentWillUpdate(){
        //7、组件将要进行刷新了 当 6中shouldComponentUpdate 返回的事true的话  进行调用
        //执行此方法后调用  render 方法
        console.log('componentWillUpdate')
    }

    componentDidUpdate() {
        //8、组将更新完了的回掉方法
        console.log('componentDidUpdate')
    }

    /**
     * 卸载时候的状态
     */
    componentWillUnmount() {
        //当组件被移除的时候的方法回调
        console.log('componentWillUnmount')
        //此处不会被打印 因为这里卸载的不是该控件  是TouchComment  在TouchComment中就能打印此方法 了
    }


}





const styles = StyleSheet.create({
  container: {
    flex:1
  }

})