/** * ------------------ 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,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);
},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,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()：强制更新
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。