因为一直使用的技术栈是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节点
根据阶段大致区分了一下,希望对大家有点作用。