React之组件的生命周期

React之组件的生命周期

  • 一、概述
  • 二、整体说明
  • 三、挂载阶段
  • 四、更新阶段
  • 五、卸载阶段

一、概述

  • 生命周期:一个事务从创建到最后消亡经历的整个过程
  • 组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程
  • 意义:理解组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等
  • 钩子函数的作用:为开发人员在不同阶段操作组件提供了时机
  • 注意:只有 类组件 才有生命周期

在这里插入图片描述

二、整体说明

  • 图示说明
    在这里插入图片描述

三、挂载阶段

  • 执行时机 组件创建时(页面加载时)
  • 执行顺序
    在这里插入图片描述
    在这里插入图片描述

四、更新阶段

  • 执行时机:1. setState() 2. forceUpdate() 强制组件更新 3. 组件接收到新的props(实际上,只需要父组件更新,子组件就会重新渲染)
  • 以上三者任意一种变化,组件就会重新渲染
  • 执行顺序
    在这里插入图片描述
    在这里插入图片描述

五、卸载阶段

  • 执行时机:组件从页面中消失
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用IPSEC VPN 在有防火墙的场景和有NAT转换的场景下实现隧道通信实验

目录 一、在有防火墙的场景 1、为所有设备配置对应ip地址: 2、进入两个防火墙实现公网互通 3、测试公网是否互通 4、进入SW1配置IPSEC VPN 5、进入SW2配置IPSEC VPN 6、配置策略方向ESP的流量 7、尝试使用PC1访问PC2 二、在有NAT地址转换的场景 1、为新增加…

视频号将不支持添加企业微信:私域流量受阻

我是卢松松,点点上面的头像,欢迎关注我哦! 以前大家一直嚷嚷着说微信视频号企业微信私域流量神器,这下好了,从今日起这个功能没了,以后新的视频号不能绑定企业微信了,但老视频号还可以。 昨天…

招投标系统简介 招投标系统源码 java招投标系统 招投标系统功能设计

功能模块: 待办消息,招标公告,中标公告,信息发布 描述: 全过程数字化采购管理,打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&…

【数据结构】二叉树、二叉搜索树、平衡二叉树、红黑树、B树、B+树

概述 二叉树(Binary Tree):每个节点最多有两个子节点(左子节点和右子节点),没有限制节点的顺序。特点是简单直观,易于实现,但查找效率较低。 二叉搜索树(Binary Search…

烘焙小程序蛋糕店烘焙店源码点心店小程序源码

本系统开发使用JAVA技术栈开发 使用uniapp技术栈 支持微信小程序 ,对接打印机,对接第三方同城跑腿平台 用户端使用:uniapp 管理端使用:vueelementui 后台服务使用:springbootjpa

Java版本工程行业管理系统源码-专业的工程管理软件-提供一站式服务 em

​ 工程项目管理软件(工程项目管理系统)对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营,全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#…

不同语言操作符的优先级

看到标题,可能会心生疑惑: 这么基础且重要的操作,不同语言不应该是一致的吗? 并不一定,比如对于右移运算和加法运算,Go就与其他多数语言表现得不一致: Go: package mainimport "fmt"func main() …

Vault数据备份恢复-MySQL

前言 Vault提供了可靠的功能来保护数据库和其他关键数据。 对于MySQL数据库,Vault提供了一个易于使用的解决方案,可以自动创建和管理定期备份,并支持从备份中快速恢复数据。本文将介绍Vault后端存储MySQL的备份恢复,包括如何设置Vault、如何进行数据备份和还原、如何保护…

iOS——Block two

Block 的实质究竟是什么呢?类型?变量?还是什么黑科技? Blocks 是 带有局部变量的匿名函数 Blocks 由 OC 转 C 源码方法 在项目中添加 blocks.m 文件,并写好 block 的相关代码。打开「终端」,执行 cd XX…

[C++]01.基础,数据类型,运算符

01.基础,数据类型,运算符 一.C基础入门1.HelloWorld2.注释3.变量4.常量5.关键字6.命名规则 二.数据类型1.整形2.sizeof关键字3.浮点型4.字符型5.转义字符6.字符串型7.布尔类型8.数据的输入 三.运算符1.算数运算符2.赋值运算符3.比较运算符4.逻辑运算符 一.C基础入门 1.HelloWo…

webshell详解

Webshell详解 一、 Webshell 介绍二 、 基础常见webshell案例 一、 Webshell 介绍 概念 webshell就是以asp、php、jsp或者cgi等网页文件形式存在的一种命令执行环境,也可以将其称做为一种网页后门。黑客在入侵了一个网站后,通常会将asp或php后门文件与…

【普通人维护windows的方法,不中毒,不弹窗,不卡顿】

前言 IT人也是普通人,我就说说普通人维护电脑的方法。 我的电脑配置 给大家看看,配置一般,运行软件和游戏,可以保持基本流程 日常维护措施 我不太喜欢设定一些非主流的配置,下了一个360卫士,360其他的套餐可以不用下…

数据结构——绪论

一、绪论 (一)基本概念 数据:数据是对客观事物的符号表示,在计算机科学中是指所有能输入到计算机中并被计算机程序处理的符号的总称。 数据元素:数据元素是数据的基本单位,在计算机程序中通常作为一个整…

js实现按照句号将一段文本进行分段

/*** 将给定的文本按照300字并且按照句号分为多个p标签** param text 给定的文本* returns 返回分割后的多个p标签的数组*/ function splitTextByParagraph(text) {// 将文本按照句号分割成多个句子const sentences text.split(。);// 初始化一个空数组来存储生成的p标签const…

Nodejs中的全局对象

今天我们将探讨Nodejs中的全局对象,这是Nodejs中重要且有趣的知识点。我们将通过生动形象的例子和风趣的风格来深入理解这些概念,并比较Nodejs中的全局对象与前端JavaScript中的全局对象之间的异同点。 全局对象是什么? 在Nodejs环境中&…

超详细|ChatGPT辅助论文编写教程

本教程讲述在论文编写中使用ChatGPT进行辅助,提供思路,提升效率 祝看到本教程的小伙伴们都完成论文,顺利毕业。 可以加QQ群交流,一群: 123589938 第一章 论文框架搭建 1.1 明确论文题目 1.1.1 适合的研究方向 首先赋…

STM32 低功耗-睡眠模式

STM32 睡眠模式 文章目录 STM32 睡眠模式第1章 低功耗模式简介第2章 睡眠模式简介2.1 进入睡眠模式2.1 退出睡眠模式 第3章 睡眠模式代码示例总结 第1章 低功耗模式简介 在 STM32 的正常工作中,具有四种工作模式:运行、睡眠、停止和待机模式。 在系统或…

动态规划之树形DP

动态规划之树形DP 树形DP何为树形DP 树形DP例题HDU-1520 Anniversary partyHDU-2196 Computer834. 树中距离之和 树形DP 何为树形DP 树形DP是指在“树”这种数据结构上进行的动态规划:给出一颗树,要求以最少的代价(或取得最大收益&#xff…

uniapp app端 echarts 设置tooltip的formatter不生效问题以及解决办法

需求一: y轴数据处理不同数据增加不同单位 需求二: 自定义图表悬浮显示的内容 需求一:实现方式 在yAxis里面添加formatter yAxis: [{//y轴显示value的设置axisLabel: {show: true,formatter (value, index) > {var valueif (value > 1…

怎么让表格中的一行数据 转置 为一列数据 (WPS )

例如 我现在有一列数据 我想要 变成一行 数据 1.首先选中想要转置的数据,然后control C 2.接着 点击你想放置数据的位置 右键 其实 关键是 找到 选择性复制 3. 找到转置,勾选 最后 确定 反之亦然