react学习之路4：react组件的生命周期（与vue2.x对比）

学vue的朋友们都知道，vue提供给vue组件在不同阶段的生命周期都提供了不同的生命周期钩子函数，以vue2.x为例子，vue的生命周期下图，整体可以总结为4个生命周期，即create，mount，update和desdroy，每个生命周期都有对应的生命周期钩子函数来满足我们实际的开发需求。

而react也一样，组件也拥有生命周期（或者说vue的生命周期可能在一定程度上借鉴了react），react的生命周期如下

1. Mounting：已插入真实 DOM
2. Updating：正在被重新渲染
3. Unmounting：已移出真实 DOM

为何没有vue中的create生命周期阶段呢，因为react组件有constructor()构造函数，相当于vue中的create阶段。
根据查阅的资料，来看看在各个阶段，react组件内都调用了什么函数。

1. 挂载阶段
   当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

constructor()
//组件构造函数
static getDerivedStateFromProps()
//会在调用 render 方法之前调用
//并且在初始挂载及后续更新时都会被调用。
//它应返回一个对象来更新 state
//如果返回 null 则不更新任何内容。
render()
//渲染函数
componentDidMount()
// 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构。

2. 更新阶段
   当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

static getDerivedStateFromProps()
shouldComponentUpdate()
//返回一个布尔值。在组件接收到新的props或者state时被调用。
//在初始化时或者使用forceUpdate时不被调用。
//可以在你确认不需要更新组件时使用
render()
//渲染函数
getSnapshotBeforeUpdate()

componentDidUpdate()
//在组件完成更新后立即调用
//在初始化时不会被调用。

3. 卸载
   当组件从 DOM 中移除时会调用如下方法：

componentWillUnmount()
//在组件从 DOM 中移除之前立刻被调用。

我们创建一个组件来测试一下组件的调用顺序
代码如下

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { click:1 }
        this.componentCreated()

    }
    componentCreated(){
        console.log('componentCreated')
    }
    UNSAFE_componentWillMount() {
        console.log('componentWillMount')
    }
    componentDidMount(){
        console.log('componentDidMount')
    }
    componentDidUpdate(){
        console.log('componentDidUpdate我更新了')
    }
    addClick(){
        let click = this.state.click
        this.setState({
            click:++click
        })
    }
    render() { 
        console.log('render')
        return ( <div onClick={()=>{this.addClick()}}>这是页面app{this.props.number},点击({this.state.click})</div> );
    }
}

结果如图：

在此之外react还提供了其他api，但在新版本的react中已经移除，比如：

componentWillMount() //dom挂载前调用
componentWillUpdate()// dom更新前调用
//现在替换成新的写法代替
UNSAFE_componentWillMount() // 组件挂载前
UNSAFE_componentWillUpdate() //组件 更新后

4. 错误处理时
   react当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

static getDerivedStateFromError()
componentDidCatch()

5. 可以触发更新生命周期的api

setState()
//更新state并更新dom
forceUpdate()
//强制更新组件