本篇文章主要的讲述了关于reactjs的生命周期的介绍,还有关于react的setstate机制介绍,下面就让我们看文章的正文内容吧
生命体的周期是单一不可逆的,软件开发的生命周期会根据方法不同,在完成前重新开始
生命周期
一、初探生命周期
react组件的生命周期根据广义定义描述,可以分为挂载、渲染和卸载。
生命周期分两类:
1)当组件在挂载或者卸载时
2)当组件接受新数据时,即组件更新
一)挂载或卸载
1、组件挂载
最基本过程:组件状态初始化:读取初始state和props, 以及compontentwillmount()和componentdidmount()
2、组件卸载
只有componentwillunmount这一个卸载前状态
二)数据更新过程
1、组件自身state更新:shouldcompontentupdate componentwillupdate render componentdidupdate
2、props改变引发的绘制:componentwillrecieveprops shouldcomponentupdate componentwillupdate render componentdidupdate
总结起来:
二、自定义组件(reactcompositecomponent)的生命周期主要通过三种状态进行管理:mounting、receive_props、unmounting,
它们负责通知组件当前所处的状态,应该执行生命周期中的哪个步骤,是否可以更新state。
mountcomponent -> mounting
updatecomponent -> receive_props
unmountcomponent -> unmounting
mounting
一mountcomponent:
通过mountcomponent挂载组件,初始化序号、标记等参数,判断是否为无状态组件,并进行对应的组件初始化工作,比如初始化props、context等参数。
利用getinitialstate获取初始化state、初始化更新队列和更新状态。
mountcomponent本质上是通过 递归 渲染内容的,由于递归的特性,父组件的componentwillmount在其子组件的componentwillmount之前调用,而父组件的componentdidmount在其子组件的componentdidmount之后调用。
二)updatecomponent
若存在componentwillreceiveprops,则执行。如果此时在componentwillreceiveprops中调用setstate,是不会触发re-render的,
而是会进行state合并。且在componentwillreceiveprops、shouldcomponentupdate和componentwillupdate中也还是无法获取到更新后的this.state,
即此时访问的this.state 仍然是未更新的数据,需要设置this.state = nextstate后才可以,只有在render和componentdidupdate中才能获取到更新后的this.state。(想看更多就到react参考手册栏目中学习)
updatecomponent本质上是通过 递归 渲染内容的,由于递归的特性,父组件的componentwillupdate在其子组件的componentwillupdate之前调用,而父组件的componentdidupdate在其子组件的componentdidupdate之后调用。
注意:禁止在shouldcomponentupdate和componentwillupdate中调用setstate,这会造成循环调用,直至耗光浏览器内存后崩溃。
三)unmountcomponent
unmountcomponent负责管理生命周期中的componentwillunmount。
如果存在componentwillunmount,则执行并重置所有的相关参数、更新队列以及更新状态,如果此时在componentwillunmount中调用setstate,是不会触发re-render的,这是因为所有更新队列和更新状态都被重置为null,并清除了公共类,完成了组件写在操作。
三、无状态组件
只有一个render方法,并没有组件类的实例化过程,也没有实例返回
没有状态,没有生命周期,只有纯粹接受prop渲染成dom结构,纯粹为渲染而生
setstate机制
一、setstate异步更新
注意:绝对不要直接修改this.state,这是一种低效做法,而且很有可能被之后的操作替换
1、setstate通过队列机制实现state更新, 队列机制可以高效地批量更新state
2、利用状态队列机制实现setstate的异步更新,避免频繁地重复的更新state
3、当执行setstate时,会将需要更新的state合并后放入状态队列,而不会立刻更新this.state
二、setstate调用栈
简化调用栈:
若 isbatchingupdates 为 true,则把当前组件(即调用了 setstate 的组件)放入 dirtycomponents 数组中;否则 batchupdate 所有队列中的更新。
本篇文章到这就结束了(想看更多就到react使用手册栏目中学习),有问题的可以在下方留言提问。
以上就是reactjs的生命周期是什么?reactjs生命周期的详细介绍的详细内容。