react组件的生命周期

react的生命周期分别为：挂载阶段，更新阶段，卸载阶段

image.png

挂载阶段

• 执行时机：组件创建时（页面加载）

• 执行顺序：constructor ——>render——>componentDidMount
  constructor :创建组件时，最先执行( 1.初始化state 2.为事件处理程序绑定this)
  render: 每次组件渲染都会触发。（渲染UI 注意:不能调用setState() ）
  componentDidMount：组件挂载（完成DOM渲染）后。(1. 发送网络请求 2.DOM操作)

  
  image.png

image.png

更新阶段

• 执行时机：
  1. setState()
  2. forceUpdate()
  3. 组件接收到新的props

• 执行顺序:render——>componentDidUpdate
  render:每次组件渲染都会触发 （渲染UI 与 挂载阶段 是同一个render）
  componentDidUpdate：组件更新后 （DOM操作，可以获取到更新后的DOM内容，不要调用setState）

  
  image.png

卸载阶段

• 执行时机：组件从页面中消失

• 执行顺序：componentWillUnmount
  componentWillUnmount：组件卸载（从页面中消失）；
  执行清理工作（比如：清理定时器等）

  
  image.png