React-Native组件的生命周期

组件的生命周期

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

/**
 * 组件的生命周期:
 * 
 */
import React, { Component } from 'react';

import {
    StyleSheet,
    Text,
    View,
    AppRegistry,
    DeviceEventEmitter, //通知
} from 'react-native';

export default class ReactDemo extends Component {
    constructor (props) {
        super (props);
        this.state = {
            age:18,
        };
    }
    changeAge () {
        var age = this.state.age;
        age += 1;
        // 注意this.setState的写法不是:
        /**
         * this.setState = {
         * 
         * };
         * 
         */
        // 上面的写法是错误的!!!
        // 下面这个才是对的:
        this.setState({
            age:age,
        }) 
    }
    
    render () {
        console.log('ReactDemo\'s render');
        // 这里年龄这个属性不能写死 , 不写死的方法就是属性里嵌套这状态机变量!
        // 属性是死的 , 状态机变量是活的!
        return (
            <View style = {styles.mainStyle}>
                <Text onPress = {this.changeAge.bind(this)} style = {styles.textStyle}>修改年龄</Text>
                <LifeCycle age = {this.state.age}/>
            </View>
        )
    }

}


class LifeCycle extends Component {
    // 1.构造方法:
    constructor (props) {
        super(props);
        console.log('1.constructor');

        this.state = {
            money:0,
        }
    }
    // 2.即将加载组件方法:
    componentWillMount () {
        console.log('2.componentWillMount');
        
    }
    // 3.渲染方法(返回一个视图):
    render () {
        console.log('3.render');
        
        return (
            <View style = {styles.lifeCycleStyle}>
                <Text onPress = {this.changeMoney.bind(this)}>修改名称</Text>
                <Text>{this.state.money}</Text>
                <Text>年龄:{this.props.age}岁</Text>
            </View>
        )
    }
    // 点击事件:
    changeMoney () {
        // 重新给name设置新值:
        var m = this.state.money;
        m += 100;
        this.setState({
            money:m,
        })
    }
    // 4.完成加载组件方法:
    componentDidMount () {
        console.log('4.componentDidMount');

    }
    // 5.prpos 如果props修改了的话会调用该方法:
    componentWillReceiveProps () {
        console.log('5.prpos componentWillReceiveProps');
        
    }
    // 5.state 是否更新组价方法 , 只有更新state和传入新的props时才会调用本方法:
    shouldComponentUpdate () {
        console.log('5.state shouldComponentUpdate');
        // 这里如果返回的是false则本方法虽然会走 , 但是之后的render渲染方法就不会走了!
        return true;
    }
    // 6.组件即将刷新方法:走完这个方法后会重新render渲染组件:
    componentWillUpdate () {
        console.log('6.componentWillUpdate');
    }
    // 7.render重新渲染完成后会走这个方法:
    componentDidUpdate () {
        console.log('7.componentDidUpdate');
    }
    // 8.组件销毁的方法:
    // 移除定时器
    // 移除观察者(通知)
    // 清除缓存...
    componentWillUnmount () {
        console.log('8.componentWillUnmount');
        
    }

}


// 样式表:
var styles = StyleSheet.create({
    mainStyle: {
        flex:1,
        backgroundColor:'white',
        flexDirection:'row',
        marginTop:20,
        flexWrap:'wrap',
        justifyContent:'center',
        alignItems:'center',
    },
    lifeCycleStyle: {
        backgroundColor:'yellow',
        justifyContent:'center',
        alignItems:'center',
        width:200,
        height:200,
    },
    textStyle: {
        justifyContent:'center' , 
        alignItems:'flex-start',
    },

})

AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

愿编程让这个世界更美好