ReactJs组件介绍

组件的生命周期

在组建创建到加载到页面上运行以及组件被销毁的过程中，重视伴随着各种各样的时间，这些在组件特定时期，触发的事件，统称为组件的声明称周期

组件创建阶段

该阶段的声明周期函数只执行一次
componentWillMount 组件将要挂载，还没有开始渲染虚拟DOM
render 第一次开始渲染真正的虚拟DOM，执行完，内存中就有了完整的虚拟DOM了
componentDidMount 组件完成挂载，完成了这个方法，组件就进入到了运行中的状态

组件的运行节点

根据组件的state和props的改变，有选择行的触发0次或者多次
componentWillReceiveProps 组件将要接收新属性，只要方法触发，那么父组件为当前子组件传递新的属性值
shouldComponentUpdate 组件是否需要被更新，此时，组件将要被更新，但是state和props是最新的
componentWillUPdate 组件将要被更新，此时内存那种的虚拟DOM是旧的
render 重新渲染虚拟DOM
componentDidUpdate 完成更新

组件的销毁阶段

只执行一次
componentWillUnmount 组件将要被卸载，此时组件还能够被使用

示意图

下面是相关过程以及注释的总结过程。如果有疑问，可以结合下面的官方API文档进行综合理解。

                开始
                 |
                static defaultProps={}  

                   //这是初始化props属性默认值，防止组件中某些必须的属性，外界没有传输的时候报错的问题
                 |
                |----------------- 
                |this.state={}

                         //是用来初始化组件的私有数据的，定义在组件的构造器函数中，this.state会在第一时间被初始化，

                         //因为在class内部，只要new
                |              必然会优先调用
                | |
                |componentWillMount

                           //组件的虚拟DOM元素将要挂到页面上执行，此时虚拟DOM还没有被创建，也没有被挂载到页面上，

                           //因为虚拟DOM在render创建的
                |            此时还没有创建虚拟DOM
                | |
                |render  

                          //当进入render函数执行的时候，就已经要开始渲染虚拟DOM了，当render执行完，虚拟DOM也就在内存

                          //中创建完毕，但是还没有挂载到页面上
                | |
                |componentDidMount

                         //表示组件已经完成了挂载，此时state上的数据，和内存中的虚拟DOM以及浏览器的页面，保持一致了，

                         //到这里组件挂载到页面中
                |----------------- 
                 |                                                                    组件的销毁过程
                 |                                                                            |
                 |            |----------------------------------------------------------------------------------------------------------|
                 运行中--------------------------------------------------------------------------------------------
                 |-----------》卸载（unmount） ---------------------------componentWillUnmount-->结束                             |
组件运行阶段         |----------------------------------                                                                  |            
                 |--------------------属性props改变----》componentWillReceiveProps组件将要更新props属性              |
                 状态state改变                                                                  |                                                      |
                 |                                            |                                                      |
                shouldConponentUpdate《------------------------ 通过state和props的改变都能触发组件的更新               |
                 |                                                                                                  |
                 |---------------》false    ---------------------------------------------------------------------------             
                componentWillUpdate  组件将要被更新，此时还没有被更新
                 |
                 render 重新渲染内存中的虚拟DOM对象，当render调用完毕，虚拟DOM树已经和组件的state保持一致了，但是页面还是旧的
                 |
                 componentDidUpdate 组件已经完成了更新，此时页面也是最新的数据

以上是此次相关知识点的总结。