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