React生命周期

React component lifecycle 生命周期

React的生命周期是component在建立和渲染的过程,以component class出发,React会做以下的过程:

依照component被挂入DOM的过程分类,过程中会依序执行component的函数如下:

  • Mountingcomponent被建立实体(即react element)后,渲染到DOM的过程:

    1. constructor()
    2. static getDerivedStateFromProps()
    3. render()
    4. componentDidMount()
  • Updating:当component收到新的props时,更新状态(state),再重新渲染到DOM的过程:

    1. static getDerivedStateFromProps()
    2. shouldComponentUpdate()
    3. render()
    4. getSnapshotBeforeUpdate()
    5. componentDidUpdate()
  • Unmounting:当component不被使用,从DOM移除的过程

    1. componentWillUnmounted()
  • Error Handling:当component错误发生时

    1. componentDidCatch()