Props 屬性 相當(dāng)于OC中的ReadOnly ,只讀屬性!!
state 狀態(tài) 每個(gè)組件有一個(gè)系統(tǒng)的setState方法,用來(lái)改變狀態(tài),而且會(huì)刷新界面!調(diào)用Render()函數(shù)!!
export default class Test extends Component {
state={ //狀態(tài)機(jī)
title:'默認(rèn)值',
person:'ABC'
}
static defaultProps={
age:18
}
//相當(dāng)於OC中的ViewWillAppear
componentWillMount(){
//AlertIOS.alert('WillMount來(lái)了')
}
//
render() {
return (
<View ref="topView" style={styles.container}>
<Text>{this.state.person}</Text>
<Text>{this.props.age}</Text>
<Button title="我就是個(gè)Button"
color="red"
onPress={()=>this.click('點(diǎn)擊')}
/>
</View>
);
}
click(event){
//改變狀態(tài)機(jī)後才會(huì)進(jìn)componentDidUpdate()方法
this.setState({
title:event
});
//可以通過(guò)對(duì)DOM設(shè)置**ref屬性**來(lái)拿到View
console.log(this.refs.topView)
}
//在Render之後 -- 今後用來(lái)發(fā)送網(wǎng)絡(luò)請(qǐng)求(第一次加載的數(shù)據(jù))
componentDidMount(){
// AlertIOS.alert('DidMount')
}
//這個(gè)方法!!刷新UI之後調(diào)用!!!第一次加載不會(huì)進(jìn)來(lái)!!狀態(tài)機(jī)改變後會(huì)進(jìn)來(lái)!!!
componentDidUpdate(){
AlertIOS.alert('DidUpdate');
}
}
//下面這個(gè)函數(shù)是個(gè)閉包,調(diào)用方法為onPress={btnClick}
const btnClick = ()=>{
AlertIOS.alert('我來(lái)了!!')
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
