面试题:useEffect的Clean Up 什么时候触发?

在这里插入图片描述

useEffect作为做常用的Hook,以下三个知识点你有必要了解下~

防止写出奇怪的代码祸害队友,而我不幸就是这个受害者!!!!!

useEffect的依赖项为空

useEffect的dependencyList作为一个可选参数,当他的依赖项为空的时候,每次引起页面的渲染更新的时候,都会调用一次​该useEffect参数。

function App() {const [updateList, setUpdateList] = useState([])useEffect(() => {console.log("dependencyList 为null的useEffect被调用了")})return (<div className="App"><header className="App-header"><div>{updateList.map(time => { return <div>time:{time}</div> })}</div><div onClick={() => { setUpdateList([...updateList, +new Date()]) }}>Add record</div></header></div>);
}

效果​如下:

在这里插入图片描述

在示例中,点击页面的Add Record 按钮共计四次,右侧中显示了共计2+4次的日志,这说明了每次页面的刷新时候,由于dependencyList为空,所以每次的副作用都可以被调用到。

useeffect的依赖项为空数组的时候

​在第一个示例中,我们可以猜想,每次的页面更新,useEffect作为副作用,都会被调用,但当dependencyList为空数组的时候,由于没有匹配到任何的dependency,所以会导致为每次的副作用都跟我们无关,​只有第一次初始化页面的时候才会匹配到。

同样的,下面一个简单的例子​。

function App() {const [updateList, setUpdateList] = useState([])useEffect(() => {console.log("dependencyList 为空数组的useEffect被调用了")}, [])return (<div className="App"><header className="App-header"><div>{updateList.map(time => { return <div>time:{time}</div> })}</div><div onClick={() => { setUpdateList([...updateList, +new Date()]) }}>Add record</div></header></div>);
}

在这里插入图片描述

usseEffect返回​函数代表什么?

首先,讲这个内容并不是想要表达什么,只是因为很多人在写博客的时候,​内容太过于旧了,所以现在就更新一波,并不是说谁谁谁的问题。

打开CSDN,可以看到很多关于useEffect返回函数的描述
在这里插入图片描述

事实真的是这样嘛​?让我们​测试下。

function App() {const [updateList, setUpdateList] = useState([])useEffect(() => {return () => {console.log('useEffect的返回函数被调用')}}, [])return (<div className="App"><header className="App-header"><div>{updateList.map(time => { return <div>time:{time}</div> })}</div><div onClick={() => { setUpdateList([...updateList, +new Date()]) }}>Add record</div><a href='https://www.baidu.com'>跳转到百度</a></header></div>);
}

在这里插入图片描述

上述代码中,我们添加了一个a标签,作用是跳转到百度的网站,模拟出了组件被干掉的情况,这时候让我们在​打开”保留日志“开关,让我们看看是否会在日志中打印出来。​

此时,尚未点击按钮,useEffect的回调函数已经被调用了。
在这里插入图片描述

当我们点击按钮跳转过去的时候,useEffect的回调函数并没有被调用。
查看官网看看如何解释~

在这里插入图片描述

所以当我们要在useEffect的clean up逻辑运行的东西,你在useEffect中要有相对应的set ​up操作。

求关注~ 希望能帮到你~​

微信公众号文章

在这里插入图片描述

公众号文章链接,求关注

求关注~ 希望能帮到你~

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

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

相关文章

Pytest框架中用例用例执行常用参数介绍

pytest 支持通过命令行参数来定制测试运行的方式。以下是一些常用的 pytest 执行参数介绍。 学习目录 -q 或 --quiet: 安静模式&#xff0c;只显示进度和摘要 -s : 选项允许在测试的输出中捕获 stdout 和 stderr。 -v : 选项会使 pytest 的输出更加详细。 -k &#xff1a;…

Git 恢复已删除的branch

六一节晚上改了点code, 做完之后commit, 然后误删了这个branch, 并且新建了branch. 那么怎样恢复已删除的branch呢&#xff1f; 网上查询一番&#xff0c;找到了答案&#xff1a; 1. git reflog 找到被删的branch中最后一笔commit, 记录它的SHA1。 怎么看SHA1是被删除的bra…

鸿蒙应用Stage模型【应用/组件级配置】

应用/组件级配置 在开发应用时&#xff0c;需要配置应用的一些标签&#xff0c;例如应用的包名、图标等标识特征的属性。本文描述了在开发应用需要配置的一些关键标签。 应用包名配置 应用需要在工程的AppScope目录下的[app.json5配置文件]中配置bundleName标签&#xff0c;…

Python PyInstaller打包方法介绍

为了将开发好的Python工具交付给其他人使用&#xff0c;除了在目标电脑部署Python编译环境以外&#xff0c;我们还可以将它打包成可执行文件&#xff0c;这样目标电脑不需要安装Python环境就可以运行。将Python程序打包成可执行文件的方法有多种&#xff0c;比如Nuitka、PyInst…

【TB作品】msp430f5529单片机,读取DHT11温湿度,读取adc,oled显示

功能 msp430f5529单片机&#xff0c;读取DHT11温湿度&#xff0c;读取adc&#xff0c;oled显示 硬件 //OLED引脚分配 绿色板子 //DO(SCLK)------P4.3 //D1(DATA)------P4.0 //RES-----------P3.7 //DC------------P8.2 //CS------------P8.1 //mq135 P6.5 //DHT11 P4.1 部…

如何使用Python获取图片中的文字信息

如下有三中方法&#xff1a; 方法1. 使用Tesseract OCR&#xff08;pytesseract&#xff09; 安装依赖 首先&#xff0c;确保你已经安装了Tesseract OCR引擎&#xff08;例如&#xff0c;通过你的操作系统的包管理器&#xff09;。然后&#xff0c;你可以通过pip安装pytesse…

微博增强-tampermonkey脚本实现网页管理悄悄关注

不是很明白微博为什么不出个x的列表功能&#xff0c;毕竟现在信息洪流&#xff0c;有些东西只是要看要了解&#xff0c;但不希望天天在首页轰炸眼睛&#xff0c;扰乱心智。 这个tampermonkey脚本适配了pc web和手机pwa版本&#xff08;weibo.com/m.weibo.cn&#xff09;,解决了…

golang map部分原理源码个人走读-附个人理解过程图解

近期再写map的demo时出现了下面一段报错&#xff0c;于是带着疑惑去看了一下源码 目的&#xff1a;主要想知道为啥map不让并发读写 fatal error: concurrent map read and map write 一.map的数据结构 先有个印象&#xff0c;后续会详细介绍 // A header for a Go map. ty…

NDIS Filter开发-OID 请求

NDIS 定义对象标识符 (OID) 值来标识适配器参数&#xff0c;其中包括操作参数&#xff0c;例如设备特征、可配置的设置和统计信息。 Filter驱动程序可以查询或设置基础驱动程序的操作参数&#xff0c;或过滤/覆盖顶层驱动程序的 OID 请求。 NDIS 还为 NDIS 6.1 及更高版本的Fi…

Informer

I n f o r m e r Informer Informer 摘要&#xff1a; 长序列时间序列的预测 i n f o r m e r informer informer优点&#xff1a; P r o b s p a r e Probspare Probspare自关注机制&#xff0c;在时间复杂度和内存使用方面达到 O ( N l o g N ) O(NlogN) O(NlogN),在序列依…

IP协议1.0

基本概念&#xff1a; • 主机: 配有IP地址, 但是不进⾏路由控制的设备; • 路由器: 即配有IP地址, ⼜能进⾏路由控制; • 节点: 主机和路由器的统称; IP协议的报头 • 4位版本号(version): 指定IP协议的版本, 对于IPv4来说, 就是4. • 4位头部⻓度(header length): IP头部的⻓…

初识SDN

初识SDN 软件定义网络&#xff08;SDN&#xff0c;Software-Defined Networking&#xff09;是一种网络架构方法&#xff0c;它通过将网络控制平面与数据平面分离来实现网络的集中化控制和管理。 基本概念 以下是SDN的关键概念和组成部分&#xff1a; 1. SDN的基本概念 控制…

mybatis增删改查模板设置及设置调用

mybatis增删改查模板设置 系统配置文件完成以及连接好数据之后&#xff0c;就可以用这个mybatis了&#xff0c;首先写这个数据库的增删改查模板StashMapper.xml&#xff0c;这个东西是要放在DAO层中的奥&#xff0c;切记。 1.编写mybatis对应数据库的增删改查模板 在我的Sta…

持续总结中!2024年面试必问 20 道 Kafka面试题(一)

一、Kafka 的基础概念有哪些&#xff1f; Kafka 是一个分布式流处理平台&#xff0c;由 LinkedIn 开发&#xff0c;并于 2011 年成为 Apache 软件基金会的一部分。以下是 Kafka 的一些基础概念&#xff1a; Broker: Kafka 集群由多个 Broker 组成&#xff0c;每个 Broker 存储…

DKTCDR:Domain-Oriented Knowledge Transfer for Cross-Domain Recommendation

Domain-Oriented Knowledge Transfer for Cross-Domain Recommendation IEEE(CCF B.SCI 1)-Guoshuai Zhao, Xiaolong Zhang, Hao Tang, Jialie Shen, and Xueming Qian-2024 思路 在CDR中,构建连接两个域的桥梁是实现跨域推荐的基础。然而现在的CDR方法往往在连接两个域时忽…

通俗易懂理解RANSAC算法

RANSAC(Random Sample Consensus)&#xff0c;翻译为随机抽样一致算法。 算法思路&#xff1a;从所有观测中随机找到几个尽可能少的点去拟合模型&#xff0c;拟合后依次计算模型和所有观测数据的残差&#xff0c;当残差小于给定的阈值时&#xff0c;就将其判断为内点&#xff…

软件测试进阶

目录 一、自动化测试 1.概念 2.Selenium 2.1 概念 2.1.1 Selenium是什么&#xff1f; 2.1.2 Selenium特点 2.1.3 工作原理 2.2 SeleniumJava环境搭配 2.3 定位元素 2.3.1 CSS语法 2.3.2 XPath语法 2.4 应用 2.4.1 点击提交文本 2.4.2 模拟输入 2.4.3 清除文本 2…

统信UOS桌面操作系统1070上使用notepad--文本编辑器

原文链接&#xff1a;统信UOS桌面操作系统1070上使用notepad–文本编辑器 Hello&#xff0c;大家好啊&#xff01;今天我要向大家推荐一款在统信UOS桌面操作系统1070上非常好用的文本编辑器软件——“notepad–”。这款软件功能强大、操作简便&#xff0c;特别适合开发人员和日…

车载软件架构 - AUTOSAR 的信息安全框架

车载软件架构 - AUTOSAR 的信息安全架构 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 屏蔽力是信息过载时代一个人的特殊竞争力&#xff0c;任何消耗…

Nginx企业级负载均衡:技术详解系列(17)—— 长连接优化策略与下载服务器高效搭建

你好&#xff0c;我是赵兴晨&#xff0c;97年文科程序员。 今天咱们来聊聊Nginx的两个知识点&#xff1a;Nginx的长连接优化、如何将Nginx配置成下载服务器。 长连接配置详解 在Nginx的配置中&#xff0c;长连接是一个重要的性能优化手段。它允许一个TCP连接上发送多个请求和…