React常用生命周期介绍

挂载（创建）

当组件实例被创建并插入 DOM 中时，创建阶段的生命周期函数在在组件的一生中只执行一次。其生命周期调用顺序如下：

• componentWillMount()
  • 此时props和state以及函数都已经加载完毕但是内存中的虚拟DOM还没有开始渲染

• render()
  • 当执行render是就已经开始渲染虚拟DOM了，render执行完虚拟DOM就创建好了，但是还没有挂载到真实的页面上

• componentDidMount()
  • 组件已经完成了挂载，此时，我们的 state 上的数据，和内存的虚拟DOM，以及浏览器中的页面，已经完全一致了。

更新

当组件的 props 或 state 发生变化时会触发更新，根据props 或 state 的改变触发0次或多次。组件更新的生命周期调用顺序如下：

• conponentwillReceiveProps

  • 组件初始化并不会执行，当props发生变化时才会执行这个钩子
  • 旧的props可以使用this.props获取，新数据要在第一个参数中获取

• shouldComponentUpdate()

  • 当state或props被修改时就会执行，必须返回一个布尔值
  • 如果返回false则不会执行后面的生命周期函数重新回到原型中，后续的render函数也不会被调用，因此，页面也不会被更新，但是，组件的state状态已经被更新了
  • 在 shouldComponentUpdate 你获取到的state数据是旧的，要想最新的数据必须使用 nextProps 或 nextState

• componentWillUpdate()
  • 组件将要更新但尚未更新时会进入这个生命周期函数，state是旧的，内存中的DOM还是旧的，页面也是旧的。
  • 第一个参数是将要修改后的数据

• render()
  • 重新渲染内存中的虚拟DOM树，但是页面还是旧的还没有被挂载到页面上

• componentDidUpdate()
  • 页面完成更新后会调用这个方法，此时页面props和state都是最新的
  • 第一个参数是修改之前的参数

卸载

当组件从 DOM 中移除时会调用如下方法：

• componentWillUnmount()
  • componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。