组件的生命周期
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
/**
* 组件的生命周期:
*
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
AppRegistry,
DeviceEventEmitter, //通知
} from 'react-native';
export default class ReactDemo extends Component {
constructor (props) {
super (props);
this.state = {
age:18,
};
}
changeAge () {
var age = this.state.age;
age += 1;
// 注意this.setState的写法不是:
/**
* this.setState = {
*
* };
*
*/
// 上面的写法是错误的!!!
// 下面这个才是对的:
this.setState({
age:age,
})
}
render () {
console.log('ReactDemo\'s render');
// 这里年龄这个属性不能写死 , 不写死的方法就是属性里嵌套这状态机变量!
// 属性是死的 , 状态机变量是活的!
return (
<View style = {styles.mainStyle}>
<Text onPress = {this.changeAge.bind(this)} style = {styles.textStyle}>修改年龄</Text>
<LifeCycle age = {this.state.age}/>
</View>
)
}
}
class LifeCycle extends Component {
// 1.构造方法:
constructor (props) {
super(props);
console.log('1.constructor');
this.state = {
money:0,
}
}
// 2.即将加载组件方法:
componentWillMount () {
console.log('2.componentWillMount');
}
// 3.渲染方法(返回一个视图):
render () {
console.log('3.render');
return (
<View style = {styles.lifeCycleStyle}>
<Text onPress = {this.changeMoney.bind(this)}>修改名称</Text>
<Text>{this.state.money}</Text>
<Text>年龄:{this.props.age}岁</Text>
</View>
)
}
// 点击事件:
changeMoney () {
// 重新给name设置新值:
var m = this.state.money;
m += 100;
this.setState({
money:m,
})
}
// 4.完成加载组件方法:
componentDidMount () {
console.log('4.componentDidMount');
}
// 5.prpos 如果props修改了的话会调用该方法:
componentWillReceiveProps () {
console.log('5.prpos componentWillReceiveProps');
}
// 5.state 是否更新组价方法 , 只有更新state和传入新的props时才会调用本方法:
shouldComponentUpdate () {
console.log('5.state shouldComponentUpdate');
// 这里如果返回的是false则本方法虽然会走 , 但是之后的render渲染方法就不会走了!
return true;
}
// 6.组件即将刷新方法:走完这个方法后会重新render渲染组件:
componentWillUpdate () {
console.log('6.componentWillUpdate');
}
// 7.render重新渲染完成后会走这个方法:
componentDidUpdate () {
console.log('7.componentDidUpdate');
}
// 8.组件销毁的方法:
// 移除定时器
// 移除观察者(通知)
// 清除缓存...
componentWillUnmount () {
console.log('8.componentWillUnmount');
}
}
// 样式表:
var styles = StyleSheet.create({
mainStyle: {
flex:1,
backgroundColor:'white',
flexDirection:'row',
marginTop:20,
flexWrap:'wrap',
justifyContent:'center',
alignItems:'center',
},
lifeCycleStyle: {
backgroundColor:'yellow',
justifyContent:'center',
alignItems:'center',
width:200,
height:200,
},
textStyle: {
justifyContent:'center' ,
alignItems:'flex-start',
},
})
AppRegistry.registerComponent('ReactDemo', () => ReactDemo);
