生命周期图
1.constructor:(重)
- 在初始化的时候执行，必须要写super否则this的指向会发生错误。
- 可以在当前生命周期中存放当前组件所需要的一些状态，状态必须存放到this.state中去。
- 默认是访问不到this.props,如果需要访问this.props的时，必须要在constructor中传入props。
2.componentWillMount
- 组件挂载前执行的生命周期，数据和模版还为进行相结合，因此我们可以在当前生命周期中进行数据的最后更改。
- 我们可以接收到外部的数据，可以在当前生命周期中访问到this.props。
- 当前生命周期在17.0版本中被废除调了。
3.render:(重要)(多)
- 当前生命周期是一个渲染函数，是数据和模版进行相结合的一个函数。当前生命周期在执行的时候会将渲染好的模版在缓存中存储一份。当下一次render函数进行渲染的时候会将新的模版和缓存的模版进行相比较。根据不同点来进行更新渲染，其实这就是所谓的diff比较(diff算法：新旧两个虚拟DOM的对比)。
- 当前生命周期会多次执行，当this.setState或者this.props发生改变的时候当前生命周期就会执行。
- 我们通过控制shouldComponentUpdate来减少render函数渲染的次数从而得到性能优化
4.componentDidMount:(重)
- 当前生命周期是数据和模版已经结合完毕并且已经挂载到来页面上，因此我们可以在当前生命周期中获取到真实的DOM结构
- 我们通常会在当前生命周期中进行前后端数据的交互，和方法的实例化(swiper)
React中如何访问真实的DOM节点：
第一种：
<h2 ref="dom"></h2>
this.refs.dom
第二种：
<h2 ref={(dom)=>{this.dom=dom}}></h2>
this.dom
5.componentWillReceiveProps:(多)
- 当props的数据发生改变的时候就会执行当前生命周期，在当前生命周期函数中会有一个参数，这个参数是新的props
- 当前生命周期在17.x的版本中被废除掉了
6.shouldComponentUpdate:(重)(多)
- 当前生命周期的书写的时候必须return 一个布尔值,当值为true的时候继续执行下面的生命周期，如果为false的情况下,则不在执行下面的生命周期.
- 当前是生命周期中会有2个参数 一个是新的props 一个是新的state 我们可以根据新的props/state与旧的props和state进行相比较从而减少render函数渲染的次数
- shouldComponentUpdate这个生命周期绝定的render函数是否渲染，而不是决定数据是否更新
componentWillUpdate:(多)
- 当数据更新的时候当前生命周期会执行，当前生命周期中会有2个参数一个是新的props 一个是新的state
- 我们可以在当前生命周期中进行更新数据的最后更改
- 注意：
- 尽量不要在当前生命周期中调用this.setState
- 当前生命周期在未来的17.0中被废除掉来
componentDidUpdate:(重)(多)
- 当数据更新完成以后会执行当前生命周期，我们可以在当前生命周期中获取到数据更新后最新的DOM结构(切记加边界条件)
- 当前生命周期中会有2个参数一个是旧的props 一个是旧的state
componentWillUnmount:(重)
- 当组件被卸载的时候会执行当前生命周期，我们可以在当前生命周期中做性能的优化。例如：事件的解绑、定时器的移除等操作
