React Native 之生命週期及props,state

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',
    }
});