美文网首页
React-Native组件的生命周期

React-Native组件的生命周期

作者: 小苗晓雪 | 来源:发表于2018-03-08 14:57 被阅读58次
    组件的生命周期
    /**
     * 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);
    

    愿编程让这个世界更美好

    相关文章

      网友评论

          本文标题:React-Native组件的生命周期

          本文链接:https://www.haomeiwen.com/subject/qiryfftx.html