react-native 生命周期

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class mykblearn extends Component {
   constructor(props){
        super(props)
        this.state={times:0}
    }
    timePlus(){
        let times=this.state.times
        times++  //times+1
        this.setState({
            times:times  //times变为新的times
        })
    }
    componentWillMount(){
      console.log('componentWillMount')
    }
    componentDidMount(){
      console.log('componenDidMount')  //加载完就显示componentWillMount，render,componenDidMount这三个
    }
    shouldComponentUpdate(){
      console.log('shouldComponentUpdate')
      return true
    }
    componentWillUpdate(){
      console.log('componentWillUpdate')
    }
    componentDidUpdate(){
      console.log('componentDidUpdate') //点击一次后更新组件，控制台显示shouldComponentUpdate，componentWillUpdate，render,componentDidUpdate这四个
    }
 
  render() {
    console.log('render')
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={this.timePlus.bind(this)}>
          点击我
        </Text>
        <Text style={styles.instructions}>
         你点击了{this.state.times}次
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    marginTop:100,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('mykblearn', () => mykblearn);

父子组件间通信的生命周期：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

var Son =React.createClass( {
   getDefaultProps(){
     console.log('child','getDefaultProps')
   },
   getInitialState(){
     console.log('child','getInitialState')
     return{
       times:this.props.times   //继承父组件的times
     }
   },
    timesPlus(){
        let times=this.state.times
        times++  
        this.setState({
            times:times  
        })
    },
    componentWillMount(){
      console.log('child','componentWillMount')
    },
    componentDidMount(){
      console.log('child','componenDidMount')  
    },
    componentWillReceiveProps(props){
      console.log(this.props)
      console.log('child','componentWillReceiveProps')
      this.setState({
        times:props.times
      })
    },
    componentWillUpdate(){
      console.log('child','componentWillUpdate')
    },
    componentDidUpdate(){
      console.log('child','componentDidUpdate') 
    },
    timesReset(){
      this.props.timesReset()  //继承父的timesReset方法
    },
  render() {
    console.log('child','render')
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={this.timesPlus}>
          儿子：有本事揍我啊!
        </Text>
        <Text style={styles.instructions}>
         你居然揍我{this.state.times}次
        </Text>
         <Text style={styles.instructions} onPress={this.timesReset}>
        信不信我亲亲你
        </Text>
      </View>
    );
  }
})


var mykblearn =React.createClass( {
   getDefaultProps(){
     console.log('father','getDefaultProps')
   },
   getInitialState(){
     console.log('father','getInitialState')
     return{
       hit:false,
       times:2
     }
   },
   
    componentWillMount(){
      console.log('father','componentWillMount')
    },
    componentDidMount(){
      console.log('father','componenDidMount') 
    },
    shouldComponentUpdate(){
      console.log('father','shouldComponentUpdate')
      return true
    },
    componentWillUpdate(){
      console.log('father','componentWillUpdate')
    },
    componentDidUpdate(){
      console.log('father','componentDidUpdate') 
    },
    timesReset(){
      this.setState({
        times:0
      })
    },
    willHit(){
      this.setState({
        hit:!this.state.hit
      })
    },
     timesPlus(){
        let times=this.state.times
        times+=3  
        this.setState({
            times:times  
        })
    },
  render() {
    console.log('father','render')
    return (
      <View style={styles.container}>
      {this.state.hit ? 
        <Son times={this.state.times} timesReset={this.timesReset}/> 
        : null}
        <Text style={styles.welcome} onPress={this.timesReset}>
          老子说：心情好就放你一马
        </Text>
        <Text style={styles.instructions} onPress={this.willHit} >
         到底揍不揍
        </Text>
        <Text style={styles.instructions}  >
         就揍了你{this.state.times}次而已
        </Text>
        <Text style={styles.instructions} onPress={this.timesPlus} >
         不听话，再揍你3次
        </Text>
      </View>
    );
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {150     
149     textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('mykblearn', () => mykblearn);

如果74行的hit:true,一开始就加载子组件，则reload后显示：

如果74行的hit:false，则reload后显示：

 点一下“到底揍不揍”后：

再点一下“不听话，再揍你3次”，控制台显示红色部分

再点一下“信不信我亲亲你”

再点“不听话，再揍你3次”

 再揍3次

再揍3次

 点一下“有本事揍我啊”