/** * —————— 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}><Imagesource={{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’组件的生命周期
组件的生命周期主要由三个部分组成：
生活的最大悲剧不是失败，而是一个人已经习惯于失败。
