006@React组件的生命周期.md

React Native 是基于组件化开发。弄清楚组件的生命周期对于我们开发很有必要。下面我们看一下组件的生命周期.这里采用的ES5的写法。对于ES6，思路上是一样的，可能函数有些改变。不过没有关系。知道这些过程就OK了。建议直接看组件生命周期的代码。
这里参考了文档：http://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid=402039662&idx=1&sn=f3ea81d2777d657a1f39351b2893e405&scene=18#rd。可以看原文，我这里截取了一段，然后直接添加了点东西。

在下图中描述了React Native中组件的生命周期，我们可以根据其中的执行顺序在对应的函数中做对应的操作。

42518577.png
React Native组件的生命周期大致上可以划分为实例化阶段、存在阶段和销毁阶段 ，其中最常用的为实例化阶段，该阶段就是组件的构建、展示时期，需要我们根据几个函数的调用过程，控制好组件的展示和逻辑的处理。

二、实例化阶段函数功能分析

getDefaultProps

该函数用于初始化一些默认的属性，通常会将固定的内容放在这个函数中进行初始化和赋值；

在组件中，可以利用this.props获取在这里初始化它的属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。

getInitialState

该函数是用于对组件的一些状态进行初始化；

由于该函数不同于getDefaultProps，在以后的过程中，会再次调用，所以可以将控制控件的状态的一些变量放在这里初始化，如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值

注意：一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次的渲染，不过，如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。

componentWillMount

相当于OC中的ViewWillAppear方法，在组件将要被加载在视图上之前调用，功能相对较少。

render

render是一个组件中必须有的方法，本质上是一个函数，并返回JSX或其他组件来构成DOM，和Android的XML布局类似，注意：只能返回一个顶级元素 ;

此外，在render函数中，只可通过this.state和this.props来访问在之前函数中初始化的数据值。

componentDidMount

在调用了render方法后，组件加载成功并被成功渲染出来以后，所要执行的后续操作，一般会在这个函数中处理网络请求等加载数据的操作；
因为UI已经成功被渲染出来，所以放在这个函数里进行请求操作，不会出现UI上的错误。

三、存在期阶段函数功能分析

componentWillReceiveProps

指父元素对组件的props或state进行了修改

shouldComponentUpdate

一般用于优化，可以返回false或true来控制是否进行渲染

componentWillUpdate

组件刷新前调用，类似componentWillMount

componentDidUpdate

更新后的hook

四、销毁期阶段函数功能分析

用于清理一些无用的内容，如：点击事件Listener，只有一个过程：componentWillUnmount

组件生命周期的代码显示：

<script type="text/babel">
    var HelloMessage=React.createClass(
            {
                //1、创建阶段
                getDefaultProps:function(){
                  //在创建类的时候被调用   this.props该组件的默认属性
                    console.log("getDefaultProps");
                    return {};
                },

                //2、实例化阶段
                getInitialState:function(){
                    //初始化组件的state值，其返回值会赋值给组件的this.state属性
                  //获取this.state的默认值
                    console.log("getInitialState");
                    return {};
                },

                componentWillMount:function(){
                  //在render之前调用此方法
                    //业务逻辑的处理都应该放在这里，如对state的操作等
                    console.log("componentWillMount");
                },



                render:function(){
                    //根据state值，渲染并返回一个虚拟DOM
                    console.log("render");
                    return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是东方耀</h1>;
                    //这是注释  React.createElement
                },

                componentDidMount:function(){
                  //该方便发生在render方法之后
                    //在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构
                    //组件内部可以通过this.getDOMNode()来获取当前组件的节点
                    console.log("componentDidMount");
                },

         //3、更新阶段，主要发生在用户操作之后或父组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整
                
             componentWillReceiveProps:function(){
                 //该方法发生在this.props被修改或父组件调用setProps()方法之后
                 //调用this.setState方法来完成对state的修改
                 console.log("componentWillRecieveProps");
             },
            shouldComponentUpdate:function() {
                //用来拦截新的props或state，根据逻辑来判断
                //是否需要更新
                console.log("shouldComponentUpdate");
        
                return true;
            },

            componentWillUpdate:function(){
                //shouldComponentUpdate返回true的时候执行
                //组件将更新
                console.log("componentWillUpdate");
    
            },
    
              componentDidUpdate:function(){
                  //组件更新完毕，我们常在这里做一些DOM操作
                  console.log("componentDidUpdate");
              },

    //4、销毁阶段
           componentWillUnmount:function(){
               //销毁时被调用，通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作
               console.log("componentWillUnmount");
           }

            }
    );

    ReactDOM.render(<HelloMessage name="React 语法基础8" /> ,document.getElementById('example'));
</script>