React常用生命周期介绍

挂载（创建）

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

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

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

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

更新

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

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

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

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

• componentDidUpdate()
  • 页面完成更新后会调用这个方法，此时页面是最新的

卸载

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

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