import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var Son = React.createClass({
getDefaultProps() {
console.log('child','getDefaultProps');
},
getInitialState(){
console.log('getInitialState');
return {
times: this.props.times
}
},
timePlus() {
let times = this.state.times
times++;
this.setState({
times: times
})
},
componentWillMount() {
console.log('child','componentWillMount');
},
componentDidMount() {
console.log('child','componentDidMount');
},
componentWillReceiveProps(props) {
console.log('child','componentWillReceiveProps');
this.setState({
times: props.times
})
},
shouldComponentUpdate() {
console.log('child','shouldComponentUpdate');
return true;
},
componentWillUpdate() {
console.log('child','componentWillUpdate');
},
componentDidUpdate() {
console.log('child','componentDidUpdate');
},
timesReset() {
this.props.timesReset();
},
render() {
console.log('child','render');
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={this.timePlus}>
儿子:有本事揍我啊!
</Text>
<Text style={styles.instructions}>
你居然揍我{this.state.times}次
</Text>
<Text style={styles.instructions} onPress={this.timesReset}>
信不信我亲亲你
</Text>
</View>
);
}
})
var MyApp = React.createClass({
getDefaultProps() {
console.log('father','getDefaultProps');
},
getInitialState(){
console.log('father','getInitialState');
return {
hit: false,
times: 2
}
},
componentWillMount() {
console.log('father','componentWillMount');
},
componentDidMount() {
console.log('father','componentDidMount');
},
shouldComponentUpdate() {
console.log('father','shouldComponentUpdate');
return true;
},
componentWillUpdate() {
console.log('father','componentWillUpdate');
},
componentDidUpdate() {
console.log('father','componentDidUpdate');
},
timesReset(){
this.setState({
time: 0
})
},
willHit(){
this.setState({
hit: !this.state.hit
})
},
timePlus() {
var times = this.state.times
times += 3;
this.setState({
times: times
})
},
render() {
console.log('father','render');
return (
<View style={styles.container}>
{
this.state.hit
? <Son times={this.state.times} timesReset={this.timesReset}/>
: null
}
<Text style={styles.welcome} onPress={this.timesReset}>
老子说:心情好就放你一马
</Text>
<Text style={styles.instructions} onPress={this.willHit}>
到底揍不揍
</Text>
<Text style={styles.instructions}>
就揍了你{this.state.times}次而已
</Text>
<Text style={styles.instructions} onPress={this.timePlus}>
不听话,再揍你3次
</Text>
</View>
);
}
})
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('MyApp', () => MyApp);
getInitialState(){
console.log('father','getInitialState');
return {
hit: true,
times: 2
}
},
触发timePlus