React解密：React生命周期是什么

了解react的运行机制，生命周期是一个绕不过去的话题，那么react的生命周期会经历哪些阶段呢？在我看来应该是会经历四个阶段：

一、初始化阶段

在我们编写类组件的时候，我们常常会有这样的代码：

import React, { Component } from 'react'

class App extends Component {
    contructor (props) {
        super(props)
    }
}

export default App

这也是组件的初始化阶段，首先会继承自react的Component，然后执行上面App组件的构造函数。正因为此，在组件中才能使用一些使用生命周期函数等，而在函数组件中不能使用生命周期函数。super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件，供子组件读取(组件中props只读不可变，state可变)。而constructor()用来做一些组件的初始化工作，如定义this.state的初始内容。

二、组件的挂载阶段

在组件的挂在阶段，首先会执行的生命周期函数是componentWillMount,从字面意思就可以看出，willMount,也就是组件挂在到DOM之前调用，而且此函数只会被调用一次，所以，也可以做一些初始化的操作。但是一般都会会提前到contractor中，所以此函数用的比较少。

第二个就是render函数。根据组件的props或者是state的变化，return一个react的元素，不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。render是纯函数（Pure function：函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用），不能在里面执行this.setState，会有改变组件状态的副作用。

最后直接的就是componentDidMount函数，此函数是在组件挂在完成之后执行，也只会被调用一次。

三、组件的更新阶段

当父组件发生变化，需要重新更新，那么子组件也会一起被重新渲染，此时，在子组件中即可调用shouldComponentUpdate函数对子组件是否需要重新渲染作出手动优化。

当父组件重新render的时候，意味着会对子组件重新传入props,此时可以调用componentWillReceiveProps函数，对props进行操作，可以将传入的props转化成自生组件的state。在此函数中调用setState并不会引起第二次渲染。是因为componentWillReceiveProps中判断props是否变化了，若变化了，this.setState将引起state变化，从而引起render，此时就没必要再做第二次因重传props引起的render了，不然重复做一样的渲染了。

然后就是componentWillUpdate,组件在更新之前调用。在这边可执行一些组件更新发生前的工作，一般较少用。

render，开启更新渲染。

componentDidUpdate更新之后。此方法在组件更新后被调用，可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state。

四、卸载阶段

卸载阶段，只执行了一个生命周期函数，componentWillUnmount,当组件卸载后需要执行的生命周期函数。