React生命周期详解

React生命周期

所谓的React生命周期，就是指组件从被创建出来，到被使用，最后被销毁的这么一个过程；

而在这个过程中，React提供了我们会自动执行的不同的钩子函数，我们称之为生命周期函数；

**组件的生命周期大致分为三个阶段：组件挂载阶段，组件更新阶段，组件销毁卸载阶段 **

16.4之后的声明周期图谱如下：

组件初始化阶段

由ReactDOM.render()触发—初次渲染

1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount()

组件更新阶段

由组件内部this.setState()或者父组件重新render触发或者forceUpdate()

1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

组件卸载阶段

由ReactDOM.unmountComponentAtNode()触发

1. componentWillUnmount(）

React 15 生命周期和 React 16.3 生命周期在挂载阶段的主要差异在于，废弃了 componentWillMount，新增了 getDerivedStateFromProps。废弃了 componentWillUpdate() 新增了 getSnapshotBeforeUpdate

而在16以前的声明周期图谱如下：

初始化阶段

由ReactDOM.render()触发—初次渲染
1.constructor()
2.componentWillMount()
3.render()
4.componentDidMount()

更新阶段

由组件内部this.setSate()或父组件重新render触发
1.shouldComponentUpdate()
2.componentWillUpdate()
3.render()
4.componentDidUpdate()

卸载组件

由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount()

下面展开来说说组件的生命周期阶段

组件初始化（挂载）阶段

挂载过程在组件的一生中仅会发生一次，在这个过程中，组件被初始化，然后会被渲染到真实 DOM 里，完成所谓的“首次渲染”；

我们的App组件继承了react Component这个基类，才能使用render(),生命周期等方法；

super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件；

constructor 方法，该方法仅仅在挂载的时候被调用一次，我们可以在该方法中对 this.state 进行初始化；

其中componentWillMount 会在执行 render 方法前被触发，一些同学习惯在这个方法里做一些初始化的操作，但这些操作往往会伴随一些风险或者说不必要性；

接下来 render 方法被触发。注意 render 在执行过程中并不会去操作真实 DOM（也就是说不会渲染），它的职能是把需要渲染的内容返回出来。真实 DOM 的渲染工作，在挂载阶段是由 ReactDOM.render 来承接的；

componentDidMount 方法在渲染结束后被触发，此时因为真实 DOM 已经挂载到了页面上，我们可以在这个生命周期里执行真实 DOM 相关的操作。此外，类似于异步请求、数据初始化这样的操作也大可以放在这个生命周期来做；

import React, {
    Component } from 'react';

class App extends Component {
   
    constructor(props) {
   
        super(props);
    }
    componentWillMount