react当中生命周期（旧生命周期详解）

news2025/1/31 22:55:32

新生命周期https://blog.csdn.net/kkkys_kkk/article/details/135156102?spm=1001.2014.3001.5501

目录

什么是生命周期

react中的生命周期

旧生命周期

生命周期图示

常用的生命周期钩子函数

初始化阶段

挂载阶段

在严格模式下挂载阶段的生命周期函数会执行两次原因

更新阶段

componentWillPrceiveProps

shouldComponentUpdate

componentWillUpdate

render（同上）

componentDidUpdate

销毁阶段

componentWillUnmount()

什么是生命周期

生命周期（Lifecycle）指的是软件或程序在运行过程中经历的不同阶段和状态变化。在编程领域中，特别是在面向对象编程中，生命周期是指对象从创建到销毁的整个过程中所经历的状态变化。

生命周期通常由一系列的方法或事件组成，用于在对象的不同阶段执行相应的操作或处理。每个阶段可以对应于不同的状态，例如初始化、运行、暂停、恢复以及销毁等。

在前端Web开发中，生命周期常常用于描述JavaScript框架或库中的组件或页面的状态变化。例如，在React框架中，组件有挂载、更新和卸载等不同的生命周期阶段，每个阶段都有相应的生命周期方法，如componentDidMount、componentDidUpdate和componentWillUnmount等。

通过生命周期方法，开发者可以在对象不同状态下执行相应的操作，比如初始化数据、处理用户输入、发送网络请求、更新UI等。这些方法允许开发者在适当的时候执行逻辑，并且处理应用程序的不同方面。

react中的生命周期

在React中，组件的生命周期指的是组件从创建、挂载、更新到销毁的整个过程中所经历的不同阶段和状态变化。通过控制这些生命周期方法的调用，可以在不同的阶段执行逻辑操作，如初始化数据、处理用户输入、发送网络请求、更新UI等。

React的组件生命周期可以分为以下三个阶段：

1. Mounting（挂载）阶段：组件被创建并添加到DOM中。
   - constructor：组件的构造函数，在组件被创建时调用，一般用于初始化状态和绑定事件。
   - render：渲染组件的UI结构。
   - componentDidMount：组件被挂载到DOM后调用，可以执行副作用操作，如发送网络请求、订阅事件等。

2. Updating（更新）阶段：组件的状态或属性发生变化时重新渲染。
   - componentDidUpdate：组件更新后调用，可以进行一些更新后的操作，比如处理更新后的数据、重新渲染等。

3. Unmounting（卸载）阶段：组件从DOM中移除。
   - componentWillUnmount：组件即将被卸载和销毁时调用，可以执行一些清理操作，比如取消订阅、清除定时器等。

在React 16.3版本之后，还引入了新的生命周期方法，包括：
- static getDerivedStateFromProps: 在组件实例化或接收到新的props时调用，返回一个新的state，用于在props发生变化时更新state。
- getSnapshotBeforeUpdate: 在更新前获取DOM的快照，用于在DOM更新后获取一些额外的信息。

需要注意的是，在React 17版本中，一些生命周期方法已经被标记为过时，建议使用其他替代的方法来完成相应的操作。而且，React Hooks的引入也改变了组件的开发方式，提供了更简洁的方式操作组件的状态和生命周期。

旧生命周期

生命周期图示

常用的生命周期钩子函数
  • 初始化阶段

constructor：创建组件时最先执行；

通过给 this.state 赋值对象来初始化内部的state；为事件处理程序绑定this

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数

  • 挂载阶段

挂载阶段会触发 componentWillMount、 render 和 componentDidMount

componentWillMount：数据可以获取到，但是真实DOM没有获取到，它相当于是Vue生命周期中 created + beforeMount

render：每次组件渲染都会触发，渲染视图（注意，不能调用setState（））

componentDidMount：组件挂载（完成DOM渲染）后，用于发送网络请求；DOM操作

在严格模式下挂载阶段的生命周期函数会执行两次原因
官网的解释是： React 工作分为两个阶段，渲染和提交阶段。渲染的过程可能会很慢，提交会很快。为了避免浏览器的阻塞，React 会把渲染工作分解为多个部分执行。这就导致了React 在提交之前会多次调用渲染阶段生命周期的方法，或者在不提交的情况下调用它们。为的就是消除副作用。但在生产环境下不会产生此问题
  • 更新阶段

props更新

  • componentWillPrceiveProps

接收新属性；能够监听到当前组件身上的 props 变化 nextProps参数可以获取到最新的属性

  • shouldComponentUpdate

触发时机：组件重新渲染前执行

根据 shoundComponentUpdate 的返回值来决定是否更新自身组件及其子组件。返回 true 更
新，返回 false 不更新
此方法仅作为性能优化的方案 而存在，不要企图依靠此方法来 “ 阻止 ” 渲染
最好使用 React 提供的内置组件 PureComponent 来自动判断是否调用 render 方法，而不是使用 shoundComponentUpdate 方法进行手动判断
不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify() ，这样做会影响性能
shoundComponentUpdate( nextProps , nextState )接收两个值
        nextProps：更新完成后的 props 值
        nextState：更新完成后的 state 值
  • componentWillUpdate

组件即将更新

作用： 获取的是更新前的数据，为组件的更新做准备工作，生成新的VDOM

注意：这个钩子函数中切记不要使用 this.setState,会造成死循环

  • render（同上）
  • componentDidUpdate
在组件更新（完成 DOM渲染）后触发
1. 发送网络请求； 2. DOM 操 作；
注意：如果要 setState() 必须放 在一个if 条件中
state更新
（同上）

  • shouldComponentUpdate

  • componentWillUpdate
  • render
  • componentDidUpdate
销毁阶段
componentWillUnmount()

作用： 在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理，例如使定时器无效，取消网络请求或清理在componentDidMount中创建的任何监听。主要是为了善后工作，比如关闭定时器，删除定义的对象

组件卸载方式： 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1329513.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RocketMQ高级原理：深入剖析消息系统的核心机制

RocketMQ高级原理：深入剖析消息系统的核心机制

一、基础概念： 1. 消息模型 RocketMQ基于Producer、Broker、Consumer三部分构建。其中，Producer负责生成消息，Consumer处理消息，而Broker则承担消息存储的角色。Broker服务器可以存储多个Topic的消息，并支持消息在不同…
阅读更多...
核货宝订单管理系统提高企业效率

核货宝订单管理系统提高企业效率

核货宝订单管理系统可以帮助企业提高效率，具体体现在以下几个方面： 一、订单自动化处理：核货宝订单管理系统支持订单批发和多渠道订单导入，它可以从订单的接收、处理、跟进、发货、到售后服务等环节都可以通过系统自动完成&#x…
阅读更多...
求职方略-倒金字塔型自我介绍

求职方略-倒金字塔型自我介绍

第一步，开头第一句话提纲挈领，点出你的主要“卖点” 自我介绍的第一句话很重要，要有足够的吸引力，有足够的信息量，还要有足够的说服力，能产生先声夺人的效果。 一般的自我介绍喜欢按照时间线索依次介绍自己的经历，例如：“我大学毕业后就进入一家大公司的研发中心，工…
阅读更多...
云渲染怎么批量效果图、影视动画？云渲染在效果图、影视的作用

云渲染怎么批量效果图、影视动画？云渲染在效果图、影视的作用

在设计和建筑领域，设计师往往需要制作出精细逼真的效果图以向客户展示他们的设计思路。然而，在这些行业中，大量生成效果图需求非常费时费力。幸运的是，日期到了云渲染的这个时代，设计师们可以通过云渲染服务以一种更加…
阅读更多...
第51周，第二期技术动态

第51周，第二期技术动态

大家好，才是真的好。 今天周五，我们主要介绍与Domino相关产品新闻，以及互联网或其他IT行业动态等。 一、HCL Domino 14 Factory 上周三，即2023 年 12 月 13 日，HCL Notes Domino 14在日本举办了第一个线下产品巡回活…
阅读更多...
PS里面怎么提取图上要的颜色然后用到另一个部位去

PS里面怎么提取图上要的颜色然后用到另一个部位去

PS里面要提取图上要的颜色然后用到另一个部位去，具体步骤如下： 在ps里打开特定的图像文件； 想要提取图上的哪个颜色，就使用”吸管工具“在图上特定的位置上点击一下，就会看到前景色变成了相应的颜色； 然…
阅读更多...
Ethercat 读从站状态报文分析

Ethercat 读从站状态报文分析

涉及的从站寄存器：Register AL Status 0x0130:0x0131 。 1，发送报文 1）IgH dmesg看到的报文 [18773.590655] geshifei ec_master_send_datagrams 1059: Adding datagram datagram->index0 [18773.590656] EtherCAT DEBUG 0: frame siz…
阅读更多...
macOS 开发 - MASShortcut

macOS 开发 - MASShortcut

文章目录 关于 MASShortcut项目结构 快速使用源码学习检测是否有热键冲突处理 Event macOS 开发交流 秋秋群：644096295，V : ez-code 关于 MASShortcut MASShortcut 是一款快捷键管理工具，替代和兼容 ShortcutRecorder github : https://git…
阅读更多...
nodejs+vue+ElementUi家政服务系统c90g5

nodejs+vue+ElementUi家政服务系统c90g5

项目中登录模块用到token家政服务平台有管理员，雇主，雇员三个角色。管理员功能有个人中心，雇主管理，雇员管理，资料认证管理，项目类型管理，服务项目管理，需求信息管理，服务…
阅读更多...
yolo-nas无人机高空红外热数据小目标检测（教程+代码）

yolo-nas无人机高空红外热数据小目标检测（教程+代码）

前言 YOLO-NAS是目前最新的YOLO目标检测模型。从一开始，它就在准确性方面击败了所有其他 YOLO 模型。与之前的 YOLO 模型相比，预训练的 YOLO-NAS 模型能够以更高的准确度检测更多目标。但是我们如何在自定义数据集上训练 YOLO NAS？ 这将是我…
阅读更多...
第4节-​简历的基本要素-相关性原则

第4节-​简历的基本要素-相关性原则

(点击即可收听) 简历是求职的敲门砖，简历是否优秀的评价标准是求职者能否利用简历得到面试机会并且斩获Offer（录取通知） 相关性原则 相关性是简历撰写中最重要的一个原则，对于工作经验多的人，相关性更重要，…
阅读更多...
解决找不到vcruntime140.dll无法继续执行的多种方法分享

解决找不到vcruntime140.dll无法继续执行的多种方法分享

最近，我在使用电脑时遇到了一个问题，即“由于找不到vcruntime140.dll无法继续执行”。vcruntime140.dll是Visual C Redistributable Packages中的一个组件，它是Visual Studio 2015中运行C程序所必需的。如果找不到vcruntime140.dll文件&#…
阅读更多...
原生JavaScript实现 元素全屏与退出全屏效果

原生JavaScript实现 元素全屏与退出全屏效果

之前写过 前端screenfull实现界面全屏展示功能 突然发现自己犯傻了 其实元素js中就有全屏与取消全屏的方式 html代码如下 <!DOCTYPE html> <html> <head><title>全屏实验</title><style></style> </head> <body><d…
阅读更多...
win11下配置visual studio 2022+PCL1.13.1

win11下配置visual studio 2022+PCL1.13.1

第一部分&#xff1a;visual studio2022 安装 vs官网网址如下&#xff1a;https://visualstudio.microsoft.com/zh-hans/vs/ 第一步&#xff1a;我们打开官网链接&#xff0c;按如下操作点击下载免费版本的exe文件 第二步&#xff1a;打开下载目录下的安装文件进行安装&#…
阅读更多...
不明觉厉，Meta宣布了Fairy——快速并行指令引导视频到视频合成

不明觉厉，Meta宣布了Fairy——快速并行指令引导视频到视频合成

Meta 刚刚宣布了Fairy——一项快速并行指令引导视频到视频合成的创新技术。这一引入图像编辑扩散模型的简约而强大的改进&#xff0c;极大地增强了其视频编辑应用程序的性能。 他们的方法聚焦于基于锚的跨帧注意力的概念&#xff0c;这是一种隐式跨帧传播扩散特征的机制&#…
阅读更多...
zynqmp Linux + 裸机 （A53-0 Linux，A53-1 2 3 裸机大数据量实时处理，R5-0 协议处理，R5-1 屏幕显示逻辑等）填坑笔记

zynqmp Linux + 裸机 （A53-0 Linux，A53-1 2 3 裸机大数据量实时处理，R5-0 协议处理，R5-1 屏幕显示逻辑等）填坑笔记

fpga 和arm 采用预留内存的方式&#xff0c;采用neon 协处理器只能做到 250M/S 的速度&#xff0c;预留内存采用mmap的方式&#xff0c;当读取内存页的时候采用缺页中断的方式&#xff0c;导致速度拖沓而且预留内存没有进行Linux系统的内存管理&#xff08;在系统内 memcpy的速…
阅读更多...
MySQL数据库 视图

MySQL数据库 视图

目录 视图概述 语法 检查选项 视图的更新 视图作用 案例 视图概述 视图(View)是一种虚拟存在的表。视图中的数据并不在数据库中实际存在&#xff0c;行和列数据来自定义视图的查询中使用的表&#xff0c;并且是在使用视图时动态生成的。 通俗的讲&#xff0c;视图只保存…
阅读更多...
功能点估算法是万能的吗？适用于哪些场景？

功能点估算法是万能的吗？适用于哪些场景？

功能点估算法是一种常用的软件项目管理方法&#xff0c;主要用于估算项目的规模和工作量。使用此方法&#xff0c;在对项目功能进行细分和估算后&#xff0c;可以得出相对准确的工作量和时间&#xff0c;为项目管理和决策&#xff0c;提高数据基准和参考&#xff0c;有助于进行…
阅读更多...
网络编程：多进程和多线程编程

网络编程：多进程和多线程编程

1. 多进程编程 1.1 fork #include <sys/types.h> #include <unistd.h> // 调用失败返回 -1 设置 errno pid_t fork( void );子进程返回 0&#xff0c;父进程返回子进程 PID&#xff1b; 信号位图被清除&#xff08;父进程的信号处理函数不再对新进程起作用&…
阅读更多...
【基于激光雷达的路沿检测用于自动驾驶的真值标注】

【基于激光雷达的路沿检测用于自动驾驶的真值标注】

文章目录 概要主要贡献内容概述实验小结 概要 论文地址&#xff1a;https://arxiv.org/pdf/2312.00534.pdf 路沿检测在自动驾驶中扮演着重要的角色&#xff0c;因为它能够帮助车辆感知道可行驶区域和不可行驶区域。为了开发和验证自动驾驶功能&#xff0c;标注的数据是必不可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023