Props 属性 相当于OC中的ReadOnly ,只读属性!!
state 状态 每个组件有一个系统的setState方法,用来改变状态,而且会刷新界面!调用Render()函数!!
export default class Test extends Component {
state={ //狀態機
title:'默認值',
person:'ABC'
}
static defaultProps={
age:18
}
//相當於OC中的ViewWillAppear
componentWillMount(){
//AlertIOS.alert('WillMount來了')
}
//
render() {
return (
<View ref="topView" style={styles.container}>
<Text>{this.state.person}</Text>
<Text>{this.props.age}</Text>
<Button title="我就是個Button"
color="red"
onPress={()=>this.click('點擊')}
/>
</View>
);
}
click(event){
//改變狀態機後才會進componentDidUpdate()方法
this.setState({
title:event
});
//可以通過對DOM設置**ref屬性**來拿到View
console.log(this.refs.topView)
}
//在Render之後 -- 今後用來發送網絡請求(第一次加載的數據)
componentDidMount(){
// AlertIOS.alert('DidMount')
}
//這個方法!!刷新UI之後調用!!!第一次加載不會進來!!狀態機改變後會進來!!!
componentDidUpdate(){
AlertIOS.alert('DidUpdate');
}
}
//下面這個函數是個閉包,調用方法為onPress={btnClick}
const btnClick = ()=>{
AlertIOS.alert('我來了!!')
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
