欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-15 10:26:45
...
本篇文章主要的讲述了关于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

总结起来:

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

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

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

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

  • mountComponent -> MOUNTING

  • updateComponent -> RECEIVE_PROPS

  • unmountComponent -> UNMOUNTING

MOUNTING

一mountComponent:

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

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

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

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

二)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,这会造成循环调用,直至耗光浏览器内存后崩溃。

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

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

简化调用栈:

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

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

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

以上就是Reactjs的生命周期是什么?reactjs生命周期的详细介绍的详细内容,更多请关注其它相关文章!