0

0

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

寻∝梦

寻∝梦

发布时间:2018-09-11 15:50:18

|

2796人浏览过

|

来源于php中文网

原创

本篇文章主要的讲述了关于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

总结起来:

16.png

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

15.png

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

  • mountComponent -> MOUNTING

  • updateComponent -> RECEIVE_PROPS

  • unmountComponent -> UNMOUNTING

MOUNTING

一mountComponent:

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

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

造好物
造好物

一站式AI造物设计平台

下载

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

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

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

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
apipost极速入门
apipost极速入门

共6课时 | 0.5万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号