一、创建阶段的生命周期

　　1、constructor：初始化数据、为事件处理程序绑定 this

　　2、render：渲染 UI 结构

　　3、componentDidMount：获取 DOM 元素、发送网络请求 

import React from 'react'

export default class App extends React.Component {
  // constructor 是 react 运行阶段遇到的第一个生命周期
  // 这个生命周期的作用：初始化数据、为事件处理程序绑定 this
  constructor() {
    super()
    this.state = {}
    console.warn('constructor首先运行')
  }

  // render 是运行阶段执行的第二个生命周期
  // 这个生命周期的作用：渲染 UI 结构
  render() {
    console.warn('render 第二个运行')
    return (
      <div></div>
    )
  }

  // componentDidMount 是创建阶段执行的第三个生命周期
  // 这个阶段 DOM 已经完成渲染成功
  // 这个生命周期的作用：获取 DOM 元素、发送网络请求 
  componentDidMount() {
    console.warn('componentDidMount 第三个运行')
  }
}

 

二、更新阶段的生命周期