这里有一份简洁的前端知识体系等待你查收，看看吧，会有惊喜哦~如果觉得不错，恳求star哈~
React组件的生命周期，分为两个阶段，一个是从无到有的过程（即组件的挂载），一个是组件的变化过程（即组件的更新）。
组件的挂载，指的是将组件渲染并构造DOM元素，然后插入页码的过程。
而组件的更新，说白了就是setState导致React重新渲染组件并且把组件的变化应用到DOM元素上的过程。
组件的挂载
假设有一个Header组件，他是通过以下的方式挂载到页面：
ReactDOM.render(
<Header />,
document.getElementById('root')
)
这段代码到底发生了什么呢？ 我们先把它编译一下：
ReactDOM.render(
React.createElement(Header, null),
document.getElementById('root')
)
React.createElement函数的作用，是构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、还有子元素等。
有了这个表示 HTML 结构和信息的对象以后，就可以拿去构造真正的 DOM 元素，然后把这个 DOM 元素塞到页面上。这也是我们最后一段代码中 ReactDOM.render 所干的事情.
ReactDOM.render 功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上（在这里是 id 为 root 的 div 元素）。
我们把具体的过程，用伪代码写出来：
// React.createElement 中实例化一个 Header
const header = new Header()
// React.createElement 中调用 header.render 方法渲染组件的内容
const headerObject = header.render()
// ReactDOM 用渲染后的 JavaScript 对象来来构建真正的 DOM 元素
const headerDOM = createDOMFromObject(headerObject)
// ReactDOM 把 DOM 元素塞到页面上
document.getElementById('root').appendChild(headerDOM)
渲染组件，并将DOM塞入页面，这就是组件的挂载，这个过程如下：
constructor()
render()
// 然后构造 DOM 元素插入页面
React为了让我们更好地掌控组件的挂载过程，往上面插入了两个方法：
constructor()
componentWillMount()
render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()
有挂载，就有卸载，所以完整的过程应该是：
constructor()
componentWillMount()
render()
// 然后构造 DOM 元素插入页面
componentDidMount()
// ...
// 即将从页面中删除
componentWillUnmount()
// 从页面中删除
关于这四个方法，需要注意：
- constructor：我们一般会把组件的 state 的初始化工作放在 constructor 里面去做
- componentWillMount：组件挂载开始之前，也就是在组件调用 render 方法之前调用。一般用于组件的启动工作，例如 Ajax 数据拉取、定时器的启动
- componentDidMount：组件挂载完成以后，也就是 DOM 元素已经插入页面后调用。一般来说，有些组件的启动工作是依赖 DOM 的，例如动画的启动，而 componentWillMount 的时候组件还没挂载完成，所以没法进行这些启动工作，这时候就可以把这些操作放在 componentDidMount 当中。
- componentWillUnmount：组件对应的 DOM 元素从页面中删除之前调用。组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在 componentWillUnmount 里面去做。
组件的更新
正如前文所说，setState 导致 React.js 重新渲染组件并且把组件的变化应用到 DOM 元素上的过程，这是一个组件的变化过程。
React.js 也提供了一系列的生命周期函数可以让我们在这个组件更新的过程执行一些操作，如下：
- shouldComponentUpdate(nextProps, nextState)：你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。
- componentWillReceiveProps(nextProps)：组件从父组件接收到新的 props 之前调用。
- componentWillUpdate()：组件开始重新渲染之前调用。
- componentDidUpdate()：组件重新渲染并且把更改变更到真实的 DOM 以后调用。
完全理解组件生命周期是一个需要经验和知识积累的过程，对我们开发来说也是至关重要的，我们在开发过程中，要多多留意，加深理解~
