前言

生命周期其实就是从创建到销毁的整个过程，我们发现很多框架都涉及到生命周期，为什么这些框架需要设计生命周期呢，是因为我们需要了解我们代码的执行过程。以及它们的执行顺序是怎样的，同时在不同的生命周期阶段会暴露不同的构造函数，而在不同的构造函数中我们可以做很多不同的功能。在React中一个由extends Component创建的类组件才会拥有生命周期

react生命周期的四个阶段

组件初始化阶段：
getInitialState：初始化 this.state 的值，只在组件装载之前调用一次
getDefaultProps：只在组件创建时调用一次并缓存返回的对象（即在 React.createClass 之后就会调用）。
因为这个方法在实例初始化之前调用，所以在这个方法里面不能依赖 this 获取到这个组件的实例。
组件加载阶段：
componentWillMount：只会在装载之前调用一次
componentDidMount：只会在装载完成之后调用一次
组件更新阶段：
componentWillReceiveProps 、shouldComponentUpdate、componentWillUpdate、componentDidUpdate这些方法不会在首次render组件的周期调用。
组件销毁阶段：
componentWillUnmount：卸载组件触发

案例说明

对于上面的生命周期过程，下面来写一个案例感受一下：
关键点看代码中的注释：

import React, { Component } from 'react'

export class Button extends Component {
    constructor(props) {
        super(props)
        this.state = { liked: false }
        // 我们要执行的第一个阶段就是初始化阶段
        console.group('%c 1-初始化阶段', 'color: red', props, this.state)
    }
    // 逐渐被淘汰,需要使用就要加UNSAFE_不加会出现警告,此生命周期DOM未渲染
    // 只会在挂载之前调用一次,在render之前调用,一般我们可以在这个阶段发起请求
    // 还可以在这里调用setState改变状态,并且不会导致额外调用一次render
    UNSAFE_componentWillMount() {
        console.group('%c 2-组件加载前', 'color: green')
    }
    componentDidMount() {
        // 在这里请求也可以,此时DOM节点已经生成
        // 只在挂载完成之后调用一次,在render之后调用,从这里可以获取DOM节点
        console.group('%c 4-组件加载后', 'color: orange')
    }
    hanleClick(e) {
        this.setState({ liked: !this.state.liked })
    }
    shouldComponentUpdate() {
        console.group('%c 5-数据是否需要更新', 'color: #00ae9d')
        // return true代表组件需要更新,false表示不用更新,实际业务开发中我们一般不用这个
        // return false
        return true
    }
    UNSAFE_componentWillUpdate(nextProps, nextState) {
        console.log(nextProps, nextState)
        console.group('%c 6-更新前', 'color: #885233')
    }
    componentDidUpdate(prevProps, prevState) {
        console.log(prevProps, prevState)
        console.group('%c 7-更新后', 'color: #777663')
    }
    componentWillUnmount() {
        // 这里主要完成组件的卸载和数据的销毁,清除组件所有的setTimeout,setInterval,移除所有的事件监听
        console.log('8-组件销毁')
    }

    render() {
        // 只要状态发生变化,一定会执行render方法
        // render函数会插入jsx生成的DOM结构,react会生成一个虚拟DOM树,在每一次组件更新的时候,react会通过其diff算法比较更新前后的新旧DOM
        // 比较以后，找到最小的差异DOM,进行重新渲染
        console.group('%c 3-组件加载前render', 'color: blue')
        const text = this.state.liked ? '喜欢' : '不喜欢'
        return (
            <button onClick={this.hanleClick.bind(this)}>你{text}学习react！</button>
        )
    }
}

export default Button

点击按钮：经历如图所示的生命周期
在这里插入图片描述
再次点击按钮，进行更新：
执行更新的生命周期

如果还不清楚，直接来看图，对照着上面例子里的代码和结果，一目了然：

在这里插入图片描述

总结

react生命周期大致也可以分为初始化更新销毁三个阶段，每个阶段中都有若干个生命周期函与一对一数

初始化

最开始调用构建函数来初始化组件的state，接着getDerivedStateFromProps函数会被调用用来探测state和props是否有变化，接着渲染逻辑render()函数就开始执行了，这时候ui就会被渲染出来，最后componentDidMount就会被执行。

初始化

构建函数

getDerivedStateFromProps

render :渲染UI

componentDidMount

更新

只要组件中的props或stats发生改变，组件就会进入更新阶段：
首先执行的是getDerivedStateFromProps函数，用来探测state和props是否有变化，接着执行shouldComponentUpdate,在这里判断组件是否需要更新，如果需要更新那么render函数就会执行，ui会根据state或者props的变化进行重新渲染，渲染以后componentDidUpdate会执行，在这里处理一些组件更新以后的逻辑