真正理解React生命周期函数为什么存在？作用是什么

真正理解React生命周期函数为什么存在？作用是什么？

在了解生命周期之前，先要知道，为什么要有生命周期，生命周期函数的作用是什么？
先看官方文档：我们可以为class组件声明一些特殊的方法，当组件挂载或卸载时去执行这些方法，这些方法叫做生命周期方法。

关键字：生命周期、class组件、挂载、卸载、方法。
生命周期，在vue中，生命周期是组件从创建到销毁的过程。在React中类似，是组件从挂载到卸载的过程。
那么怎么理解挂载？所谓挂载就是将组件渲染并创建DOM元素然后插入到页面，也就是从渲染到显示出来的过程
怎么理解卸载？组件从挂载状态到真实DOM中移除，就叫卸载。
由此可见，React组件的生命周期就是组件渲染到显示再到不显示再到从DOM 中移除的一个过程，当然，这是理解的说法，在挂载和卸载之间还有一个更新的过程，也属于生命周期的范畴。
更新就是DOM更新了，然后视图更新的过程，在React中，则体现在props和state变化时造成的DOM的变化

看完上面的总结你应该知道了什么是react的生命周期。生命周期函数的作用呢？
有了生命周期的概念之后，那么在不同的生命周期阶段，就可以执行我们想要执行的一系列方法，这就是生命周期函数。作用就是在组件的不同的生命周期阶段执行相应的业务逻辑，使我们的代码更加优美简洁。

现在我们可以探讨生命周期函数了，上列表：
1、componentWillMount 组件将要挂载时触发
组件加载渲染，先constructor、state进行初始化数据，紧接着就是componentWillMount 阶段，所以这个阶段主要是初始化，做准备工作，所以在这个阶段可以修改state

补充：紧接着就是执行render,render大家应该都知道，解析数据，也就是props和state将JSX形式的虚拟DOM渲染成对象形式的虚拟DOM。

2、componentDidMount 组件挂载完成时触发
这个方法被调用时已经渲染出真实DOM，这时可以进行请求的发起，赋值给state，也可以直接在该方法中执行setState()方法

3、conponentWillReceiveProps 组件接受新的props时调用

4、shouldComponentUpdate 是否更新数据时触发
数据更新前要触发这个方法，它返回布尔值，为true则允许更新数据。这个函数可以声明两个参数，nextProps和nextState,分别代表父组件传给子组件的值和数据更新后的值。可以在这里查看数据。

5、componentWillUpdate 将要更新数据时触发
组件更新前的准备，不能修改属性和状态

补充：紧接着就是render,注意每次数据更新都会执行一次render

6、componentDidUpdate 数据更新完成时触发
组件更新完调用，可以在这里访问或者修改DOM，也可以发送请求，和componentDidMount类似

7、conponentWillUnmount 组件将要卸载时触发
在这里可以清除一些监听和计时器，在componentDidMount中添加的任务都需要在这个方法中撤销