export default class immoocApp extends React.Component {
// 1.
constructor(props) {
super(props);
this.state = { times: 0 }
}
// 2. 组件即将安装
componentWillMount(){
console.log('componentWillMount')
}
// 3. render一次
// 4. 组件已经安装
componentDidMount(){
console.log('componentDidMount')
}
// 5. 组件是否要更新
shouldComponentUpdate(){
console.log('shouldComponentUpdate')
return true
}
// 6. 组件将要刷新
componentWillUpdate(){
console.log('componentWillUpdate')
}
// 7. 再次render一次
// 8. 组件正在刷新
componentDidUpdate(){
console.log('componentDidUpdate')
}
timesPlus() {
let times = this.state.times
times++
this.setState({
times: times
})
}
// 3/7. render
render() {
console.log('render')
return (
<View style={{
flex: 1,
justifyContent: "center",
flexDirection: "column",
alignItems: 'center',
margin: 60,
backgroundColor: 'yellow'
}}>
<View style={styles.ViewForTextStyle}>
<Text style={styles.textStyle} onPress={this.timesPlus.bind(this)}>
有本事来点我啊
</Text>
</View>
<View style={styles.ViewForTextStyle}>
<Text style={styles.textStyle}>
你点了我{this.state.times}次
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
textStyle: {
height: 40,
width: 200,
textAlign: 'center',
justifyContent: 'center',
backgroundColor: 'green'
},
ViewForTextStyle: {
height: 100,
width: 200,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
}
});
网友评论