react学习笔记（二） --- 生命周期的相关理解

因为一直使用的技术栈是vue，但是觉得仅使用一个技术栈是不够的，选择react进行学习和研究。
无论学习vue还是react，生命周期是绕不过去的东西，专门开一篇，写一些自己的拙见。

生命周期是什么？

	生命周期是程序从开始到销毁的一系列过程。react分挂载、渲染、卸载的过程。
	挂载是准备开始阶段，卸载是销毁阶段，渲染是更新阶段。 那么根据使用环节分为两种，一是 挂载卸载过程，二是 更新过程。

下面分阶段来区分生命周期：

组件载入阶段：

componentWillMount :
	顾名思义，组件即将挂载的时候，因此这个生命周期用于组件载入的阶段。
	代表的是组件即将被装载到页面上，仅执行一次，对照vue的created周期。
	此时组件已经经历了constructor的初始化数据，但是还没有渲染DOM。
	
componentDidMount :
	组件已经装载在dom上的时候，此时已经可以开始操作dom节点了，也就是可以拿到真实DOM操作，仅执行一次，对照vue的mounted。
	在这里可以执行ajax请求了，请求返回后setState后组件开始渲染节点。

组件运行ing阶段：

componentWillReceiveProps(nextProps) :
	组件即将接受新属性或者新状态的时候。在这个阶段setState并不会引发render，因为父组件已经render过了。
	此生命周期多用于接受父组件改变后的props需要重新渲染组件时；
	接受一个参数nextProps，通过对比nextProps和this.props，将nextProps的state为当前组件的state，然后重新渲染组件；
	
getDerivedStatedFromProps(nextProps, prevState) :
	代替componentWillReceiveProps() , 老版本的componentWillReceiveProps方法判断前后两个props是否相同，如果不同再将nextProps更新到相应的state上。
	但是这样其实是会破坏state数据的单一数据源，导致组件状态变得不可预测，如果不return false就会增加组件重绘次数。

shouldComponentUpdate（nextProps, nextState）:
	组件接受到新属性或者新状态的时候。
	此组件主要应用于性能优化（主要是部分更新的时候）；
	唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会重新进入渲染流程，return false，接受数据后不更新，阻止render，阻止更新；
	因为react父组件的重新渲染会导致所有子组件的重新渲染，这个时候我们不需要所有子组件跟着重新渲染，所以可以在这个生命周期内进行判断。

componentWillUpdate :
	shouldComponentUpdate 返回true后，组件进行重新渲染的过程。组件即将更新，此时不能修改数据和状态，进入到componentWillUpdate，这里同样可以拿到nextProps和nextState。
	等同于 beforeUpdated

componentDidUpdate :
	组件已经更新了 等同于updated

销毁阶段 ：

componentWillUnmount :
	组件即将销毁，此时可以移除监听、清除定时器等操作，等同于 beforeDestroy
	
render :
	组件在这里生成虚拟的dom节点

根据阶段大致区分了一下，希望对大家有点作用。