react 生命周期

React 生命周期文档

1、理解

• 组件对象从创建到死亡它会经历特定的生命周期阶段
• React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
• 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

2、生命周期流程图

• 基本生命周期图

  
  
  1.png

• 完整生命周期图

  
  
  2.png

• 之前生命周期图（有些被废弃了）

  
  
  3.png

3、生命周期详述

• 组件的三个生命周期状态:

  • Mounting：创建时
  • Updating：更新时
  • Unmounting：卸载时

• 生命周期流程:

  • 第一次初始化渲染显示 --> ReactDOM.render()
    • constructor()
    • static getDerivedStateFromProps(nextProps, prevState)
    • render()
    • componentDidMount()
  • 组件内部更新state --> this.setSate()
    • static getDerivedStateFromProps(nextProps, prevState)
    • shouldComponentUpdate(nextProps, nextState)
    • render()
    • getSnapshotBeforeUpdate(prevProps, prevState)
    • componentDidUpdate()
  • 父组件更新state, 导致子组件被重新渲染（少一个函数）
    • static getDerivedStateFromProps(nextProps, prevState)
    • shouldComponentUpdate(nextProps, nextState)
    • render()
    • componentDidUpdate(prevProps, prevState, snapshot)
  • 移除组件 --> ReactDOM.unmountComponentAtNode(containerDom)
    • componentWillUnmount()

• 生命周期函数作用:

  • constructor()
    • 初始化state
    • 修改函数的this指向
    • 只会执行一次
  • static getDerivedStateFromProps(nextProps, prevState)
    • 一般不用
    • 使组件能够根据props的更改来更新其内部状态
  • render()
    • 渲染组件
  • componentDidMount()
    • 发送ajax请求
    • 执行异步任务
    • 只会执行一次
  • shouldComponentUpdate(nextProps, nextState)
    • react性能优化，减少不必要的render
  • getSnapshotBeforeUpdate(prevProps, prevState)
    • 一般不用
    • 可以在渲染之前得到DOM对象从而获取一些信息
  • componentDidUpdate(prevProps, prevState, snapshot)
    • 更新组件完成时对DOM进行操作
    • 发送ajax请求（注意不要陷入死循环）
  • componentWillUnmount()
    • 清除定时器，收尾工作等

4、重要的生命周期(必须掌握)

• constructor()
• componentDidMount()
• render()

• componentWillUnmount()
• componentDidUpdate()

5、即将被废弃的生命周期

• componentWillMount()
  • 组件挂载之前调用
• componentWillUpdate()
  • 组件将要更新之前调用
• componentWillReceiveProps()
  • 组件将要接受props，还没开始渲染时调用

6、扩展

• 能在任何位置捕获JavaScript错误，记录这些错误信息
• static getDerivedStateFromError(error)
  • 通过更新状态 --> 从而渲染显示错误信息的组件
• componentDidCatch()
  • 记录错误信息