这是我参与「第四届青训营 」笔记创作活动的的第6天

定义

组件的生命周期是指组件从被创建到挂载到页面中运行起来，再到组件不用时卸载的过程。

注意：只有类组件才有生命周期，因为类组件需要实例化，而函数组件不需要实例化。

三大周期

组件的生命周期可分成三个状态：

• Mounting(挂载)：已插入真实 DOM
• Updating(更新)：正在被重新渲染
• Unmounting(卸载)：已移出真实 DOM

React 16.4 及以后的版本，组件生命周期有微小的改动。现在以React 16.4 及以后版本的组件主要生命周期为准，如下图所示：

Render阶段

即渲染阶段。该阶段会执行constructor()和render()两个函数。

React要求在该阶段执行的函数不能有副作用。意思是只能执行纯函数，不能修改外部的状态（一般是指修改DOM）。而且该阶段可能会被 React 暂停，中止或重新启动。

Commit阶段

即提交阶段。在该阶段的函数可以有副作用，即可以修改DOM。

挂载时

挂载时就是指当组件实例被创建并插入DOM中的时候，组件会依次调用以下函数：

• constructor(): 组件的构造函数。
• render(): 用于渲染组件。
• componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。

render()方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

更新时

每当组件的state或props发生变化时，组件就会更新。

当组件的props或state发生变化时会触发更新。组件更新的生命周期调用顺序如下：

• render():用于渲染组件。
• componentDidUpdate(): 在更新后会被立即调用。

render()方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

卸载时

当组件从DOM中移除时仅调用以下方法：

• componentWillUnmount(): 在组件卸载及销毁之前直接调用。

代码实验

首先编写如下代码，并重写constructor()、render()、componentDidMount()。

import React, { createContext } from "react"

class App extends React.Component {
  constructor() {
    super()
    console.log("constructor")
  }

  componentDidMount () {
    console.log("componentDidMount")
  }

  render () {
    console.log("render")
    return (
      <p>test</p>
    )
  }
}

export default App

在浏览器刷新，打开调试工具，查看控制台输出信息：

说明挂载时是按照constructor()、render()、componentDidMount()的顺序执行的。