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

Source: Internet
Author: User


/**
 * ------------------ 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




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.