react组件生命周期

组件的生命周期

• 概念：在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为 组件的生命周期；
• 组件生命周期分为三部分：
  • 组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；
    

    componentWillMount: 组件将要被挂载，此时还没有开始渲染虚拟DOM
    render：第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟DOM了
    componentDidMount: 组件完成了挂载，此时，组件已经显示到了页面上，当这个方法执行完，组件就进入都了 运行中 的状态

  • 组件运行阶段：也有一个显著的特点，根据组件的state和props的改变，有选择性的触发0次或多次；
    

    componentWillReceiveProps: 组件将要接收新属性，此时，只要这个方法被触发，就证明父组件为当前子组件传递了新的属性值；
    shouldComponentUpdate: 组件是否需要被更新，此时，组件尚未被更新，但是，state 和 props 肯定是最新的
    componentWillUpdate: 组件将要被更新，此时，尚未开始更新，内存中的虚拟DOM树还是旧的
    render: 此时，又要重新根据最新的 state 和 props 重新渲染一棵内存中的 虚拟DOM树，当 render 调用完毕，内存中的旧DOM树，已经被新DOM树替换了！此时页面还是旧的
    componentDidUpdate: 此时，页面又被重新渲染了，state 和 虚拟DOM 和 页面已经完全保持同步

  • 组件销毁阶段：也有一个显著的特点，一辈子只执行一次；
    

    componentWillUnmount: 组件将要被卸载，此时组件还可以正常使用；

defaultProps

在组件创建之前，会先初始化默认的props属性，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 constructor 构造器中的 this.state = {}，来初始化组件的状态。

React生命周期的回调函数总结成表格如下：

组件生命周期的执行顺序：
+ Mounting：
– constructor()
– componentWillMount()
– render()
– componentDidMount()
+ Updating：
– componentWillReceiveProps(nextProps)
– shouldComponentUpdate(nextProps, nextState)
– componentWillUpdate(nextProps, nextState)
– render()
– componentDidUpdate(prevProps, prevState)
+ Unmounting：
– componentWillUnmount()