Vue转React踩坑记录——useEffect组件卸载时使用useState定义的值返回undefined

bug背景:vue转react踩坑。在vue数据是响应式的,卸载时不会出现数据已经赋值但是卸载是undefined情况,除非手动更改为undefined。而在react流行的hooks写法,你要一直操作数据,react提供的useEffect方法的return 里其实就像vue的unMounted生命周期,一些组件卸载时的清理工作都写在retrun里。然而,在卸载的时候要清理的方法一直报undefined。

如何使用useEffect进行组件卸载? 

  1. 依赖变量:如果你想要在组件卸载时执行一些清理工作,那么你应该将需要监听的变量添加到依赖数组中。这样,当这些变量发生变化时,useEffect 会重新执行。

  2. 不需要依赖的卸载逻辑:如果你需要在组件卸载时执行一些清理工作,而这些工作不依赖于组件内部的状态或属性,那么你可以将一个空数组([])作为依赖数组传递给 useEffect。这样,无论组件何时卸载,清理工作都会执行。

以下是一个例子,展示了如何在组件卸载时执行清理工作,而不需要依赖任何变量:

useEffect(() => {// 清理函数return () => {console.log('组件即将卸载,执行清理工作');};
}, []); // 空依赖数组,表示副作用只在组件卸载时执行

在这个例子中,即使没有指定任何依赖变量,useEffect 的清理函数也将在组件卸载时执行。

总结来说,是否需要依赖其他变量取决于你的具体需求。如果你需要在组件卸载时执行一些清理工作,并且这些工作依赖于某些变量,那么你应该将这些变量添加到依赖数组中。如果你不需要依赖任何变量,或者清理工作不依赖于组件的状态,那么可以传递一个空数组。

bug复现

 代码类似如下,使用useState定义变量,卸载时不依赖variable,组件意外退出,手动退出,只要卸载了就执行一次。

const CustModal= (props: {...}) => {const { source} = props;const [variable,setVariable]= useState<string>();useEffect(()=>{...}
,[source])useEffect(() => {return ()=>{if(variable){//卸载时undefinedclear();}}}, []);
}const fun=()=>{//视图操作setVariable("更改");
}

bug产生原因 

这里在第二个useEffect写的卸载方法。而这个useEffect依赖的是空数组,这个useEffect里的内容只会执行一次,及return 外一次,return 里方法一次。因为我们的变量赋值不是在这个useEffect里写的,所以对于useEffect卸载的时候它拿到的是初始值variable,这里使用useState没有定义默认值,所以是undefined。如果这样写,你一定能明白什么意思

假设卸载前一定会执行setVariable给variable赋值,那么第二个useEffect卸载时拿到的variable是什么呢?

答案是“我是初始值”

为什么?还是useEffect不依赖任何变量的情况下,之后执行一次,可以理解为对于第二个useEffect来说它只知道variable初始化,对于后面发生了什么是不知道的。所以卸载的时候只拿到了定义的变量值

const CustModal= (props: {...}) => {const { source} = props;const [variable,setVariable]= useState<string>("我是初始值");useEffect(()=>{...}
,[source])useEffect(() => {console.log(variable);return ()=>{if(variable){//卸载时"我是初始值"clear();}}}, []);
}
//假设卸载前一定会执行
const fun=()=>{//视图操作setVariable("更改");
}

bug解决 

后来使用了useRef去定义变量就能拿到卸载时的值了

const CustModal= (props: {...}) => {const { source} = props;//使用useRef定义变量const variable = useRef<string>();useEffect(()=>{variable.current = source;}
,[source])useEffect(() => {return ()=>{if(variable.current){clear();}}}, []);
}

为什么使用useRef定义变量不会销毁? 

在修复的代码里,使用 useRef 来管理 variable 的状态。useRef 返回的对象有一个 current 属性,用于存储引用。这个引用值在组件的整个生命周期中保持不变,直到组件被卸载。因此,即使在组件卸载时访问 variable.current,它仍然会保持最后的值,而不是 undefined

总结

如果想模拟vue组件卸载只执行一次的逻辑,useEffect里不依赖任何值;而且又想拿到在组件里被修改的数据,就用useRef去定义变量!!!!

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

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

相关文章

视频结构化从入门到精通——视频结构化主要技术介绍

视频结构化主要技术 1 视频接入 “视频接入”是视频结构化管道的起点&#xff08;SRC Point&#xff09;视频接入是视频结构化处理的第一步&#xff0c;它涉及将视频数据从各种采集源获取到系统中进行进一步处理。视频接入的质量和稳定性对后续的数据处理、分析和应用至关重要…

多参数遥测终端科技守护水电站生态流量下泄

随着我国水电事业的蓬勃发展&#xff0c;水电站在推动地方经济快速增长、缓解能源压力方面发挥了不可替代的作用。然而带来的生态环境问题日益凸显&#xff0c;因水电站下泄流量不足造成部分河段减水、脱水甚至干涸&#xff0c;影响了河流的正常生态功能和居民的生产、生活。因…

Android12 添加设置控制导航栏显示和状态栏下拉

添加key值 位置&#xff1a; frameworks/base/core/java/android/provider/Settings.java /*** Control navigation bar enabled*/ReadableSuppressLint("NoSettingsProvider")public static final String NAVIGATIONBAR_ENABLED "navigationbar_enabled"…

【硬件操作入门】2--GPIO与门电路、二极管三极管、LED电路与操作

【硬件操作入门】2–GPIO与门电路&#xff08;二极管&三极管&#xff09;、LED电路与操作 文章目录 【硬件操作入门】2--GPIO与门电路&#xff08;二极管&三极管&#xff09;、LED电路与操作一、GPIO与门电路1.1、GPIO的应用1.2、GPIO引脚操作1.2.1 设置引脚为GPIO功能…

【计算机组成原理】3.2.4 双端口RAM和多模块存储器

3.2.4 双端口RAM和多模块存储器 本视频涉及两种内存优化技术&#xff0c;分别是“双端口RAM”和“多模块存储器”。其中&#xff0c;“双端口RAM”已从408大纲删除&#xff0c;但由于部分自命题院校依然会考这个概念&#xff0c;视频中仍然保留了这部分内容。 408考生简要了解…

Flutter Riverpod状态管理之AutoDisposeNotifierProvider

Flutter Riverpod状态管理之AutoDisposeNotifierProvider Flutter的Riverpod状态管理&#xff0c;目前来看是官方出的最好用的状态管理库了&#xff0c;今天我们主要看AutoDisposeNotifierProvider的使用&#xff0c;AutoDisposeNotifierProvider具有如下的优势&#xff1a; 1…

day39(8/29)——harbor私有仓库管理

一、harbor私有仓库管理 是python的包管理工具&#xff0c;和yum对redhat的关系是一样的 yum -y install epel-release yum -y install python2-pip pip install --upgrade pip pip list pip 8x pip install --upgrade pip pip install --upgrade pip20.3 -i https://mirror…

RFID光触发标签在文件柜管理中的创新应用

在当今信息化时代&#xff0c;文件管理对于企业和机构的重要性不言而喻。传统的文件柜管理方式存在诸多问题&#xff0c;如查找文件困难、管理效率低下、安全性难以保障等。而 RFID 光触发标签技术的出现&#xff0c;为文件柜管理带来了全新的解决方案。 一、传统文件柜管理的…

高效学习的方式

一、如何确定一个知识点是否值得投入学习&#xff1f; 1、目标对齐&#xff1a;考虑这个知识点是否与你的个人目标、职业发展或兴趣爱好相符。 2、需求分析&#xff1a;分析当前市场或学术界对这个知识点的需求&#xff0c;是否具有普遍性和紧迫性。 3、资源可用性&#xff…

Spring扩展点系列-@PostConstruct

简介 spring的Bean在创建的时候会进行初始化&#xff0c;而初始化过程会解析出PostConstruct注解的方法&#xff0c;并反射调用该方法。 PostConstruct 的使用和特点 只有一个非静态方法能使用此注解&#xff1b;被注解的方法不得有任何参数&#xff1b;被注解的方法返回值必…

行为型设计模式-中介者(mediator)模式-python实现

设计模式汇总&#xff1a;查看 通俗示例 想象一下你正在参与一个团队项目&#xff0c;团队成员包括设计师、前端开发者、后端开发者、测试工程师等。每个团队成员都需要与其他成员沟通协作&#xff0c;比如设计师完成设计后需要通知前端开发者开始开发&#xff0c;前端开发者完…

实际开发中git在IDEA中的使用

相信搜索这个的同学代码都已经拉取到本地了&#xff0c;并且已经在idea中打开了。 1.一般我们从远程colone下来的代码默认是在主分支下的&#xff0c;也就是说我们从远程的主分支拉取的代码并且在本地创建了一个主分支。 2.一般主分支是不允许修改的&#xff0c;所以我们可以基…

Logistic分类算法原理及Python实践

一、Logistic分类算法原理 Logistic分类算法&#xff0c;也称为逻辑回归&#xff08;Logistic Regression&#xff09;&#xff0c;是机器学习中的一种经典分类算法&#xff0c;主要用于解决二分类问题。其原理基于线性回归和逻辑函数&#xff08;Sigmoid函数&#xff09;的组…

SpringBoot2:配置绑定与自动配置功能源码解读

一、配置绑定 1、作用说明 我们在开发springboot项目时&#xff0c;会有个配置文件&#xff0c;application.properties文件。 我们知道&#xff0c;像什么访问端口、上传功能的相关配置&#xff0c;都会在这里进行配置。 而这些&#xff0c;都是springboot自带的或者第三方j…

Linux | 匿名管道和命名管道:进程间通信数据流的桥梁

目录 1、进程间通信目的 2、管道——匿名管道和命名管道 匿名管道 匿名管道的示例代码&#xff1a;将数据写入管道、子进程从管道读取数据并将其输出到bash中 父子进程通过匿名管道建立通信 重点&#xff1a;管道的五个特点 命名管道&#xff08;也称为FIFO&#xff09;…

每日一题,零基础入门FPGA——工程师在线精讲,直播预告

题目传送门&#xff1a;F学社 zzfpga.com/StudentPlatform/Sheet/QuestionBankhttp://zzfpga.com/StudentPlatform/Sheet/QuestionBank 【第Ⅰ期题目 * 5】 请使用D触发器和必要的逻辑门实现此同步时序电路&#xff0c;用Verilog语言描述。 【第Ⅰ期题目 * 4】 请设计一个0…

观测云核心技术揭秘:基于时间的半结构化数据模型

前言 众所周知&#xff0c;真正意义上的统一监控观测平台本质上是一个超大的数据湖&#xff0c;其存储了大量的来自监控指标&#xff0c;各种各样的日志&#xff0c;各种各样的链路追踪以及包括用户访问行为等海量的可观测性数据。 这些海量数据有什么特点呢&#xff1f; 首先…

【网络安全】逻辑漏洞:绕过应用程序重要功能

未经许可,不得转载。 文章目录 正文漏洞影响正文 目标:xxx.com 一个流行的汽车平台,允许用户为经销商留下评论。该平台有一个功能,用户可以点赞评论,并且它限制每个用户对每个评论只能点赞一次。 然而,我找到了绕过的方法(并不是并发)。 在点击“点赞”按钮时拦截请…

新手指南 | 研发人员奖金激励方案步骤实操

研发团队是一个非常独特的存在。在研发人员的薪酬、激励方案设计上也是很多HR的痛点。 毕竟工作变化大&#xff0c;职责变化快、个体能力差异大、投入了不一定会有产出、多线程并行&#xff0c;贡献难判定、知识密度高&#xff0c;价值难衡量等等... 基于以上难点&#xff0c…

【系统架构设计】嵌入式系统设计(1)

【系统架构设计】嵌入式系统设计&#xff08;1&#xff09; 嵌入式系统概论嵌入式系统的组成硬件嵌入式处理器总线存储器I/O 设备与接口 软件 嵌入式开发平台与调试环境交叉平台开发环境交叉编译环境调试 嵌入式系统概论 嵌入性、专用性、计算机系统是嵌入式系统的三个基本的核…