引言
（乾卦九二）《彖》曰：“‘见龙在田’，德施普也。”“见龙在田，利见大人。”
- 在傅佩荣《自我的觉醒》中这样说道，见龙在田：龙出现在地上。这时候开始崭露头角，表现也可圈可点，像个青年才俊，让大家寄予厚望，但是仍须努力，安于偏下的位置。
- 对于我们学习React也是一样，前俩篇只是讲了一些概念性的知识点，后面的知识点会不断的深入到前面的知识点的每一个细节及原理，更多的时候我们需要想先是怎么用，自己创建几个小demo用一下、接着想为什么要这么用、最后再深究其原理、知其然用其所以然，根据项目的需求使用不同的用法
- 这一章主要是对于React组件的生命周期的原理详解
概念
在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为 组件的生命周期；
组件的生命周期分为三部分：
- 组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；
- componentWillMount: 组件将要被挂载，此时还没有开始渲染虚拟DOM
- render：第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟DOM了
- componentDidMount: 组件完成了挂载，此时，组件已经显示到了页面上，当这个方法执行完，组件就进入都了 运行中 的状态
- 组件运行阶段：也有一个显著的特点，根据组件的state和props的改变，有选择性的触发0次或多次；
- componentWillReceiveProps: 组件将要接收新属性，此时，只要这个方法被触发，就证明父组件为当前子组件传递了新的属性值；
- shouldComponentUpdate: 组件是否需要被更新，此时，组件尚未被更新，但是，state 和 props 肯定是最新的
- componentWillUpdate: 组件将要被更新，此时，尚未开始更新，内存中的虚拟DOM树还是旧的
- render: 此时，又要重新根据最新的 state 和 props 重新渲染一棵内存中的 虚拟DOM树，当 render 调用完毕，内存中的旧DOM树，已经被新DOM树替换了！此时页面还是旧的
- componentDidUpdate: 此时，页面又被重新渲染了，state 和 虚拟DOM 和 页面已经完全保持同步
- 组件销毁阶段：也有一个显著的特点，一辈子只执行一次；
- componentWillUnmount: 组件将要被卸载，此时组件还可以正常使用；
图解：
defaultProps
在组件创建之前，会先初始化默认的props属性，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 constructor 构造器中的 this.state = {}，来初始化组件的状态。
React生命周期的回调函数总结成表格如下：
组件生命周期的执行顺序：
• Mounting：
• constructor()
• componentWillMount()
• render()
• componentDidMount()
• Updating：
• componentWillReceiveProps(nextProps)
• shouldComponentUpdate(nextProps, nextState)
• componentWillUpdate(nextProps, nextState)
• render()
• componentDidUpdate(prevProps, prevState)
• Unmounting：
• componentWillUnmount()
总结
组件的生命周期可分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
生命周期的方法有：
- componentWillMount 在渲染前调用,在客户端也在服务端。
- componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
- componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
- shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。 - componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
- componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
- componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
愿你在这个代码繁杂、头发渐秃的编码世界里，可以温暖疲倦的自己，坚持学习
