本篇文章主要的讲述了关于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。(想看更多就到Work网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 所有队列中的更新。
本篇文章到这就结束了(想看更多就到Work网React使用手册栏目中学习),有问题的可以在下方留言提问。
以上就是Reactjs的生命周期是什么?reactjs生命周期的详细介绍的详细内容,更多请关注Work网其它相关文章!