Reactjs的生命周期是什么?reactjs生命周期的详细介绍

寻∝梦
发布: 2018-09-11 15:50:18
原创
2464 人浏览过

本篇文章主要的讲述了关于reactjs的生命周期的介绍,还有关于react的setState机制介绍,下面就让我们看文章的正文内容吧

生命体的周期是单一不可逆的,软件开发的生命周期会根据方法不同,在完成前重新开始

生命周期

一、初探生命周期

React组件的生命周期根据广义定义描述,可以分为挂载、渲染和卸载。

生命周期分两类:

1)当组件在挂载或者卸载时

2)当组件接受新数据时,即组件更新

一)挂载或卸载

1、组件挂载

最基本过程:组件状态初始化:读取初始state和props, 以及compontentWillMount()和componentDidMount()

2、组件卸载

只有componentWillUnmount这一个卸载前状态

二)数据更新过程

1、组件自身state更新:shouldCompontentUpdate componentWillUpdate render componentDidUpdate

2、props改变引发的绘制:componentWillRecievePropsshouldComponentUpdatecomponentWillUpdate render componentDidUpdate

总结起来:

16.png

二、自定义组件(ReactCompositeComponent)的生命周期主要通过三种状态进行管理:MOUNTING、RECEIVE_PROPS、UNMOUNTING,

15.png

它们负责通知组件当前所处的状态,应该执行生命周期中的哪个步骤,是否可以更新state。

  • mountComponent -> MOUNTING

  • updateComponent -> RECEIVE_PROPS

  • unmountComponent -> UNMOUNTING

MOUNTING

一mountComponent:

通过mountComponent挂载组件,初始化序号、标记等参数,判断是否为无状态组件,并进行对应的组件初始化工作,比如初始化props、context等参数。

利用getInitialState获取初始化state、初始化更新队列和更新状态。

mountComponent本质上是通过 递归 渲染内容的,由于递归的特性,父组件的componentWillMount在其子组件的componentWillMount之前调用,而父组件的componentDidMount在其子组件的componentDidMount之后调用。

14.png

二)updateComponent

若存在componentWillReceiveProps,则执行。如果此时在componentWillReceiveProps中调用setState,是不会触发re-render的,

而是会进行state合并。且在componentWillReceiveProps、shouldComponentUpdate和componentWillUpdate中也还是无法获取到更新后的this.state

即此时访问的this.state 仍然是未更新的数据,需要设置this.state = nextState后才可以,只有在render和componentDIdUpdate中才能获取到更新后的this.state(想看更多就到PHP中文网React参考手册栏目中学习)

updateComponent本质上是通过 递归 渲染内容的,由于递归的特性,父组件的componentWillUpdate在其子组件的componentWillUpdate之前调用,而父组件的componentDidUpdate在其子组件的componentDidUpdate之后调用。

注意:禁止在shouldComponentUpdate和componentWillUpdate中调用setState,这会造成循环调用,直至耗光浏览器内存后崩溃。

13.png

三)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调用栈

简化调用栈:

12.png

isBatchingUpdatestrue,则把当前组件(即调用了 setState 的组件)放入 dirtyComponents 数组中;否则 batchUpdate 所有队列中的更新。

本篇文章到这就结束了(想看更多就到PHP中文网React使用手册栏目中学习),有问题的可以在下方留言提问。

以上是Reactjs的生命周期是什么?reactjs生命周期的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!