React生命周期

React component lifecycle 生命周期

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

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

  • Mounting：component被建立实体（即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()