React Native -- The Life-Cycle of a Composite Component

標籤：react native   the life-cycle   

/** * ------------------ 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()：強制更新

 

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

React Native -- The Life-Cycle of a Composite Component