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

2024-06-03 02:36

本文主要是介绍面试题: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操作。

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

微信公众号文章

在这里插入图片描述

公众号文章链接,求关注

求关注~ 希望能帮到你~

这篇关于面试题:useEffect的Clean Up 什么时候触发?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1025797

相关文章

荣耀嵌入式面试题及参考答案

在项目中是否有使用过实时操作系统? 在我参与的项目中,有使用过实时操作系统。实时操作系统(RTOS)在对时间要求严格的应用场景中具有重要作用。我曾参与的一个工业自动化控制项目就采用了实时操作系统。在这个项目中,需要对多个传感器的数据进行实时采集和处理,并根据采集到的数据及时控制执行机构的动作。实时操作系统能够提供确定性的响应时间,确保关键任务在规定的时间内完成。 使用实时操作系统的

一些其他面试题

阿里二面:那你来说说定时任务?单机、分布式、调度框架下的定时任务实现是怎么完成的?懵了。。_哔哩哔哩_bilibili 1.定时算法 累加,第二层每一个格子是第一层的总时间400 ms= 20 * 20ms 2.MQ消息丢失 阿里二面:高并发场景下引进消息队列有什么问题?如何保证消息只被消费一次?真是捏了一把汗。。_哔哩哔哩_bilibili 发送消息失败

zookeeper相关面试题

zk的数据同步原理?zk的集群会出现脑裂的问题吗?zk的watch机制实现原理?zk是如何保证一致性的?zk的快速选举leader原理?zk的典型应用场景zk中一个客户端修改了数据之后,其他客户端能够马上获取到最新的数据吗?zk对事物的支持? 1. zk的数据同步原理? zk的数据同步过程中,通过以下三个参数来选择对应的数据同步方式 peerLastZxid:Learner服务器(Follo

java常用面试题-基础知识分享

什么是Java? Java是一种高级编程语言,旨在提供跨平台的解决方案。它是一种面向对象的语言,具有简单、结构化、可移植、可靠、安全等特点。 Java的主要特点是什么? Java的主要特点包括: 简单性:Java的语法相对简单,易于学习和使用。面向对象:Java是一种完全面向对象的语言,支持封装、继承和多态。跨平台性:Java的程序可以在不同的操作系统上运行,称为"Write once,

【Kubernetes】常见面试题汇总(三)

目录 9.简述 Kubernetes 的缺点或当前的不足之处? 10.简述 Kubernetes 相关基础概念? 9.简述 Kubernetes 的缺点或当前的不足之处? Kubernetes 当前存在的缺点(不足)如下: ① 安装过程和配置相对困难复杂; ② 管理服务相对繁琐; ③ 运行和编译需要很多时间; ④ 它比其他替代品更昂贵; ⑤ 对于简单的应用程序来说,可能不

【附答案】C/C++ 最常见50道面试题

文章目录 面试题 1:深入探讨变量的声明与定义的区别面试题 2:编写比较“零值”的`if`语句面试题 3:深入理解`sizeof`与`strlen`的差异面试题 4:解析C与C++中`static`关键字的不同用途面试题 5:比较C语言的`malloc`与C++的`new`面试题 6:实现一个“标准”的`MIN`宏面试题 7:指针是否可以是`volatile`面试题 8:探讨`a`和`&a`

Laravel 面试题

PHP模块 PHP7 和 PHP5 的区别,具体多了哪些新特性? 性能提升了两倍 结合比较运算符 (<=>) 标量类型声明 返回类型声明 try…catch 增加多条件判断,更多 Error 错误可以进行异常处理 匿名类,现在支持通过new class 来实例化一个匿名类,这可以用来替代一些“用后即焚”的完整类定义 …… 了解更多查看文章底部链接 PHP7 新特性 为什么 PHP

【吊打面试官系列-Redis面试题】说说 Redis 哈希槽的概念?

大家好,我是锋哥。今天分享关于 【说说 Redis 哈希槽的概念?】面试题,希望对大家有帮助; 说说 Redis 哈希槽的概念? Redis 集群没有使用一致性 hash,而是引入了哈希槽的概念,Redis 集群有 16384 个哈希槽,每个 key 通过 CRC16 校验后对 16384 取模来决定放置哪个槽, 集群的每个节点负责一部分 hash 槽。

【Kubernetes】常见面试题汇总(一)

目录 1.简述 etcd 及其特点? 2.简述 etcd 适应的场景? 3.简述什么是Kubernetes? 4.简述 Kubernetes和 Docker的关系? 1.简述 etcd 及其特点? (1)etcd 是Core0s 团队发起的开源项目,是一个管理配置信息和服务发现(service discovery)的项目,它的目标是构建一个高可用的分布式键值(keyvalue)数据

2018秋招C/C++面试题总结

博主从8月中旬开始大大小小面试了十几家公司,至今也许是告一段落吧,希望后面会有好结果,因此总结记录一些C/C++方向常见的问题。和大家一起学习! 参考了互联网的各种资源,自己尝试归类整理,谢谢~ 一、C和C++的区别是什么? C是面向过程的语言,C++是在C语言的基础上开发的一种面向对象编程语言,应用广泛。 C中函数不能进行重载,C++函数可以重载 C++在C的基础上增添类,C是一个结构