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

测试用例--不更新：

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>
    );
},
});

测试结果：

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'

测试用例--更新：

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',
  },
});

测试结果：

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'

组件的生命周期

组件的生命周期主要由三个部分组成：

• Mounting：组件正在被插入DOM中
• Updating：如果DOM需要更新，组件正在被重新渲染
• Unmounting：组件从DOM中移除

React提供了方法，让我们在组件状态更新的时候调用，will标识状态开始之前，did表示状态完成后。例如componentWillMount就表示组件被插入DOM之前。

Mounting

• getInitialState()：初始化state
• componentWillMount()：组件被出入DOM前执行
• componentDidMount()：组件被插入DOM后执行

Updating

• componentWillReceiveProps(object nextProps):组件获取到新的属性时执行，这个方法应该将this.props同nextProps进行比较，然后通过this.setState()切换状态
• shouldComponentUpdate(object nextProps, object nextState):组件发生改变时执行，应该将this.props和nextProps、this.stats和nextState进行比较，返回true或false决定组件是否更新
• componentWillUpdate(object nextProps, object nextState)：组件更新前执行，不能在此处调用this.setState()。
• componentDidUpdate(object prevProps, object prevState)：组件更新后执行

Unmounting

• componentWillUnmount()：组件被移除前执行

Mounted Methods

• findDOMNode()：获取真实的DOM
• forceUpdate()：强制更新