React 组件的生命周期详解

1.概念：

在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为 组件的生命周期；

组件生命周期分为三部分：

• 组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；

  • componentWillMount:组件将要被挂载，此时还没有开始渲染虚拟DOM。

  • render: 第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟DOM了。

  • componentDidMount:组件完成了挂载，此时组件已经显示在页面上了，当执行完这个方法，组件就进入运行中状态。

• 组件运行阶段：也有一个显著的特点，根据组件的state和props的改变，有选择性的触发0次或多次；
  • componentWillReceiveProps:组件将要接收新属性，此时，只要这个方法被触发，就证明父组件向当前子组件传递新的属性值；
  • shouldComponentUpdate:组件是否需要被更新（返回true|false控制组件是否更新），此时，组件页面尚未被更新，但是，state和props是最新的。
  • componentWillUpdate:组件将要被更新，内存中的虚拟DOM树还是旧的，即页面还是没有更新。
  • render:根据最新的state和props重新渲染一棵内存中的虚拟DOM树，，当render调用完毕，内存中的旧虚拟DOM树，已经被新的DOM树替换，但此时页面仍然是旧的。
  • componentDidUpdate:页面是最新的，state、虚拟DOM树、页面已经完全保持同步。
• 组件销毁阶段：也有一个显著的特点，一辈子只执行一次；
  • componentWillUnmount:组件将要被卸载，此时组件还是可以正常使用。

2.React Native组件生命周期图：

生命周期图分析：

defaultProps：

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

在组件生命周期中，每个生命周期函数调用的次数不同；同时，在某些生命周期可以调用this.setState()还更改state，那么有哪些可以执行this.setState()呢？

组件生命周期的执行顺序：

• 组件创建阶段：

  • constructor()

  • componentWillMount()

  • render()

  • componentDidMount()

• 组件运行阶段：

  • componentWillReceiveProps(nextProps)
  • shouldComponentUpdate(nextProps, nextState)
  • componentWillUpdate(nextProps, nextState)
  • render()
  • componentDidUpdate(prevProps, prevState)

• 组件销毁阶段：

  • componentWillUnmount()

有nextProps、nextState说明在该生命周期中直接通过this.state或this.props获取的值还是上一次未更新的值，可通过nextProps或nextState在该生命周期获取最新状态或属性。