React Native--The life-cycle of a Composite Component

/**
 * ------------------ The Life-Cycle of a Composite Component ------------------
 *
 * - constructor: Initialization of state. The instance is now retained.
 *   - componentWillMount
 *   - render
 *   - [children‘s constructors]
 *     - [children‘s componentWillMount and render]
 *     - [children‘s componentDidMount]
 *     - componentDidMount
 *
 *       Update Phases:
 *       - componentWillReceiveProps (only called if parent updated)
 *       - shouldComponentUpdate
 *         - componentWillUpdate
 *           - render
 *           - [children‘s constructors or receive props phases]
 *         - componentDidUpdate
 *
 *     - componentWillUnmount
 *     - [children‘s componentWillUnmount]
 *   - [children destroyed]
 * - (destroyed): The instance is now blank, released by React and ready for GC.
 *
 * -----------------------------------------------------------------------------
 */

Test Cases--not updated:

var SampleApp = React.createClass({
  getInitialState: function() {
    console.log(‘getInitialState‘);
    return {
        teams: null,
    };
  },
  componentWillMount: function(){
      console.log(‘componentWillMount‘);
  },
  getDefaultProps: function() {
    console.log(‘getDefaultProps‘);
  },
  componentDidMount: function() {
      console.log(‘componentDidMount‘);
  },
  render: function() {
     console.log(‘render‘);
     return this.renderLoadingView();
  },
  componentWillUpdate:function(){
    console.log(‘componentWillUpdate‘);
  },
  componentWillUnmount:function(){
    console.log(‘componentWillUnmount‘);
  },

renderLoadingView: function() {
    return (
        <View style={styles.container}>
            <Text>
                The Life-Cycle of a Composite Component
            </Text>
        </View>
    );
},
});

Test results:

2015-10-09 16:52:34.591 [info][tid:com.facebook.React.JavaScript] ‘getDefaultProps‘
2015-10-09 16:52:34.612 [info][tid:com.facebook.React.JavaScript] ‘Running application "SampleApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF‘
2015-10-09 16:52:34.620 [info][tid:com.facebook.React.JavaScript] ‘getInitialState‘
2015-10-09 16:52:34.621 [info][tid:com.facebook.React.JavaScript] ‘componentWillMount‘
2015-10-09 16:52:34.621 [info][tid:com.facebook.React.JavaScript] ‘render‘
2015-10-09 16:52:34.625 [info][tid:com.facebook.React.JavaScript] ‘componentDidMount‘ 

Test Case--Update:

var REQUEST_URL = ‘http://platform.sina.com.cn/sports_all/client_api?app_key=3571367214&_sport_t_=football&_sport_s_=opta&_sport_a_=teamOrder&type=213&season=2015&format=json‘;
var SampleApp = React.createClass({
  getInitialState: function() {
    console.log(‘getInitialState‘);
    return {
        teams: null,
    };
  },
  componentWillMount: function(){
      console.log(‘componentWillMount‘);
  },
  getDefaultProps: function() {
    console.log(‘getDefaultProps‘);
  },
  componentDidMount: function() {
      console.log(‘componentDidMount‘);
    this.fetchData();
  },
  render: function() {
     console.log(‘render‘);
    if (!this.state.teams) {
      this.state.times += 1;
        return this.renderLoadingView();
    }
  this.state.times += 1;
    var team = this.state.teams[1];
        return this.renderTeam(team);
  },
  componentWillUpdate:function(){
    console.log(‘componentWillUpdate‘);
  },
  componentWillUnmount:function(){
    console.log(‘componentWillUnmount‘);
  },
fetchData: function() {
    fetch(REQUEST_URL)
    .then((response) => response.json())
    .then((responseData) => {
        this.setState({
            teams: responseData.result.data,
        });
    })
    .done();
   },
renderLoadingView: function() {
    return (
        <View style={styles.container}>
            <Text>
                Loading teams... 
            </Text>
        </View>
    );
},
renderTeam: function(team) {
    return (
        <View style={styles.container}>
            <Image
                source={{uri: team.logo}}
                style={styles.thumbnail}>
            </Image>
            <View style={styles.rightContainer}>
                <Text style={styles.name}>{team.team_cn}</Text>
                <Text style={styles.rank}>{team.team_order}, {this.state.times}</Text>
            </View>
        </View>
    );
}
});
var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: ‘row‘,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#F5FCFF‘,
  },
  thumbnail: {
    width: 53,
    height: 81,
    marginLeft: 10,
  },
  rightContainer: {
      flex: 1,
  },
  name: {
      fontSize: 20,
      marginBottom: 8,
      textAlign: ‘center‘,
  },
  rank: {
      textAlign: ‘center‘,
  },
});

Test results:

2015-10-09 16:54:50.082 [info][tid:com.facebook.React.JavaScript] ‘getDefaultProps‘
2015-10-09 16:54:50.102 [info][tid:com.facebook.React.JavaScript] ‘Running application "SampleApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF‘
2015-10-09 16:54:50.109 [info][tid:com.facebook.React.JavaScript] ‘getInitialState‘
2015-10-09 16:54:50.109 [info][tid:com.facebook.React.JavaScript] ‘componentWillMount‘
2015-10-09 16:54:50.110 [info][tid:com.facebook.React.JavaScript] ‘render‘
2015-10-09 16:54:50.113 [info][tid:com.facebook.React.JavaScript] ‘componentDidMount‘
2015-10-09 16:54:50.237 [info][tid:com.facebook.React.JavaScript] ‘componentWillUpdate‘
2015-10-09 16:54:50.237 [info][tid:com.facebook.React.JavaScript] ‘render‘

The life cycle of a component

The life cycle of a component consists of three parts:

• mounting: The component is being inserted into the DOM
• Updating: The component is being re-rendered if the DOM needs to be updated
• unmounting: component removed from DOM

React provides a method that allows us to call when the component status is updated , before the will identifies the state before the did indicates that the state is complete. For example, componentwillmount indicates that the component was inserted before the DOM.

Mounting

• getinitialstate (): Initialize state
• Componentwillmount (): component is executed before access to DOM
• Componentdidmount (): The component is inserted after the DOM is executed

Updating

• componentwillreceiveprops (Object Nextprops) : The component is executed when it gets to a new property, this method should compare This.props with Nextprops and then This.setstate () to toggle the state
• shouldcomponentupdate (Object Nextprops, Object nextstate) : Executes when a component has changed , This.props and Nextprops, This.stats, and nextstate should be compared to return true or false to determine whether the component updates
• componentwillupdate (Object NextProps, Object nextstate) : Executes before the component is updated and cannot be called this.setstate () at this point.
• componentdidupdate (Object Prevprops, Object prevstate) : Execute after component Update

Unmounting

• Componentwillunmount (): Execute before component is removed

Mounted Methods

• Finddomnode (): Get the real DOM
• forceupdate (): Force update

 

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

React Native--The life-cycle of a Composite Component