react-native 的生命周期，以及通信关系，转载

import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var Son = React.createClass({
getDefaultProps(){
console.log('getDefaultProps')
},
getInitialState(){
return {
times: 0
}
},
timesPlus(){
let times = this.state.times
times++
this.setState({
times: times
})
},
timesReset(){
this.props.timesReset()
},
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={this.timesPlus}>
儿子说有本事揍我
</Text>
<Text style={styles.instructions}>
你居然揍了{this.state.times}次
</Text>
<Text style={styles.instructions} onPress={this.timesReset}>
反揍{this.state.times}次
</Text>
</View>
);
}
})
var proMyapp = React.createClass({
getDefaultProps(){
console.log('father', 'getDefaultProps')
},
getInitialState(){
return {
hit: false,
times: 0
}
},
timesReset(){
this.setState({
times: 0
})
},
willHit(){
this.setState({
hit: !this.state.hit
})
},
timesPlus(){
let times = this.state.times
times += 3
this.setState({
times: times
})
},

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.timesPlus}>
就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('proMyapp', () => proMyapp);

不知道为什么这里换乘es5 的写法会出现爆红，可能是因为rn版本的问题不一样