React-Native 初学之组件生命周期记录

/**
 * Created by leixiong on 2017/4/3.
 */

import React,{Component} from 'react'
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
/**
 * ES6 组件生命周期
 * props 组件属性
 * 它是组件的不可变属性（组件自己不可以自己修改props）。组件自身定义了一组props作为对外提供的接口，展示一个组件时只需要指定props作为节点的属性。
 * 一般组件很少需要对外公开方法（例外：工具类的静态方法等），唯一的交互途径就是props。所以说它也是父组件与子组件通信的桥梁。
 * 组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。
 * state 组件状态
 * 它是组件的内部状态属性，主要用来存储组件自身需要的数据。除了初始化时可能由props来决定，之后就完全由组件自身去维护。
 * 组件中由系统定义了setState方法，每次调用setState时都会更新组件的状态，触发render方法重新渲染界面。
 * 需要注意的是render方法是被异步调用的，这可以保证同步的多个setState方法只会触发一次render，这样做是有利于提高性能的。
 */
export  default  class TestLifeCycleCompoent extends Component{
        constructor(props){ //相对Android activity onCreate() 方法 可以将控制控件的状态的一些变量放在这里初始化 ，比如控件上的文字
            super(props);
            this.state={
                    count:0,
                    longCount:0,
            }
            console.log('--constructor--')
}
    componentWillMount(){/*准备加载组件。
                        这个调用时机是在组件创建，并初始化了状态之后，在第一次绘制 render() 之前。
                        可以在这里做一些业务初始化操作，也可以设置组件状态。
                        这个函数在整个生命周期中只被调用一次。
                        如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。*/
        console.log('--componentWillMount--')
    }
    render(){ //render是一个组件必须有的方法，形式为一个函数，渲染界面，并返回JSX或其他组件来构成DOM，和Android的XML布局、WPF的XAML布局类似，只能返回一个顶级元素。
        console.log('--render--')
        return <View>
            <Text style={{fontSize:20,backgroundColor:'yellow'}}
                  onPress={()=>{
                      this.setState({
                          count:this.state.count+1,
                      })
                  }

                  }
            >你妹你妹你妹{this.props.name},长按次数：{this.state.longCount}</Text>
            <Text style={{fontSize:30,backgroundColor:'red'}}
                  onPress={() => {
                      this.setState({
                          longCount:this.state.longCount+1,
                      })

                  }
                  }
            >你妹次数{this.state.count}</Text>
        </View>

    }
    componentDidMount(){//在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）
        console.log('--componentDidMount--')

    }
    //以上是组件Mounting(装载)

    //prope或者state 发生变化是会调用该方法决定是否更新Ui界面
    shouldComponentUpdate( nextProps, nextState){  /**返回布尔值（决定是否需要更新组件）
            输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样，nextState 表示组件即将更新的状态值。
            这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。
            否者，则不更新，直接进入等待状态。默认情况下，这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。
             在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。*/

    console.log('--shouldComponentUpdate--')
        return true;
    }
    componentWillUpdate(nextProps, nextState){  /*shouldComponentUpdate返回true或者调用forceUpdate之后，就会开始准备更新组件，并调用 componentWillUpdate()。
     输入参数与 shouldComponentUpdate 一样，在这个回调中，可以做一些在更新界面之前要做的事情。
     需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。
     这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。
     紧接着这个函数，就会调用 render() 来更新界面了。*/
        console.log('--componentWillUpdate--')
    }
    //当componentWillUpdate（）方法调用完后调用render()重新更新界面

    componentDidUpdate( prevProps,  prevState){ //调用了render方法后，组件加载成功并被成功渲染出来以后所执行的hook函数，一般会将网络请求等加载数据的操作，放在这个函数里进行，来保证不会出现UI上的错误
        console.log('--componentDidUpdate--')
    }

    componentWillReceiveProps(nextProps){ /**
                                            当组件接收到新的props时，会触发该函数。
                                            在该函数中，通常可以调用setState()来完成对state的修改。
                                            输入参数 nextProps 是即将被设置的属性，旧的属性还是可以通过 this.props 来获取。
                                            在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用。
                                            */
        console.log('--componentWillReceiveProps--')
    }
//以上是组件更新时的生命周期


    componentWillUnmount(){ //当组件要被从界面上移除的时候，就会调用 componentWillUnmount。在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等
        console.log('--componentWillUnmount--')
    }

    //总结
    /**
     *  组件装载过程的生命周期：constructor---componentWillMount--render-componentDidMount
     *
     *
     *  组件装载运行过程的生命周期 之当prope或者state 发生变化
     *  shouldComponentUpdate---返回true（重写此方法你可以根据实际情况，来灵活的控制组件当 props 和 state 发生变化时是否要重新渲染组件）--componentWillUpdate---render重新渲染界面--componentDidUpdate
     *
     *
     *  组件运行过程的生命周期 之prope 发生变化
     *  componentWillReceiveProps--shouldComponentUpdate--返回true（重写此方法你可以根据实际情况，来灵活的控制组件当 props 和 state 发生变化时是否要重新渲染组件）---componentWillUpdate----render重新渲染界面----componentDidUpdate
     *
     *  组件运行卸载  componentWillUnmount
     */
}