[react] 组件卸载前，加在DOM元素的监听事件和定时器要不要手动清除？为什么？

最新推荐文章于 2022-09-19 17:32:23 发布
最新推荐文章于 2022-09-19 17:32:23 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： # 前端面试题React 文章标签： react.js 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43392489/article/details/121420414
版权

[react] 组件卸载前，加在DOM元素的监听事件和定时器要不要手动清除？为什么？

定时器要在 componentWillUnmount 手动清除，直接绑定在JSX里的事件监听器不用，使用ref绑定的要清除
因为如果不清除定时器，组件卸载后依然执行，this指向，event等都会因为找不到而报错。
原生事件也要清除，声明变量时保存了某个DOM的引用，内存中依然会保留，事件也就不会被清除，导致不会进入垃圾回收机制。可能会造成内存溢出。

  个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论







主目录

与歌谣一起通关前端面试题

前端小歌谣
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react添加、删除一行dom节点
ygx_work的博客
05-10 2767
render里面的布局 { this.state.externalContact.map((item,i)=>{ //console.log("i==="+i+"item"+item) return( <Row className="gutter-row" key={i}> <Col span={20} offset={4} className="gutter-col">
react-一个npm包用于跟踪和可视化任意React组件的生命周期方法
08-15
例如，`constructor()`用于初始化组件的状态和绑定方法，`componentWillMount()`在组件渲染到DOM之前调用，而`componentDidMount()`则在组件挂载完成后调用，通常用于获取DOM元素或设置订阅。 2. 更新阶段： 当...
react替换元素节点_React 基础：Refs 和 DOM 引用之间的关系
weixin_39727005的博客
10-21 351
前言这系列是 React 基础教程(参考 React 官网)，记录了自己入门学习 React 的笔记。不太适合有 React 丰富经验的同学，但希望看到此文的你，多少都有些收获。文章代码均可在我的码云中找到：https://gitee.com/eminoda/react-learn/branches为了更好的阅读体验，可在底下的“了解更多”查看原文(我的语雀知识库)。Refs 概要随着项目发展，肯...
react 组件卸载前需要清除的方法
weixin_43294560的博客
07-15 3517
在componentWillUnmount中处理 1、定时器 clearTimeout/clearInterval 2、如监听滚动条的dom事件 window.onScroll=null; 3、网络请求 当网速较慢时,发起网络请求还未接收到就跳转到其他页面 原因是当离开页面以后，组件已经被卸载，执行setState时无法找到渲染组件。 这里通过离开页面时重写setState方法且不返回任何数据来解决,使得组件中的setState方法无效 this.setState
React - Native 定时器卸载组件后清除
hahahhahahahha123456的博客
06-27 2825
主要来自官方文档这里主要是解决定时器, 组件在卸载后, 定时器还在运行的问题我们发现很多React Native应用发生致命错误（闪退）是与计时器有关。具体来说，是在某个组件被卸载（unmount）之后，计时器却仍然被激活。为了解决这个问题，我们引入了TimerMixin。如果你在组件中引入TimerMixin，就可以把你原本的setTimeout(fn, 500)改为this.setTimeou...
[vue] vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？
歌谣的博客
03-06 1888
[vue] vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？ 需要，原生DOM事件必须要手动销毁，否则会造成内存泄漏 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
React中使用swiper，当组件卸载后会继续执行Swiper绑定的事件
weixin_42397018的博客
03-18 307
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
实例讲解React 组件生命周期
10-15
- `componentWillUnmount`：在组件即将从DOM中移除时调用，用于清理副作用，如取消定时器、清除事件监听器等。 在给定的实例中： - `Hello`组件在`componentDidMount`中设置了一个定时器，每100毫秒更新组件的透明...
React组件生命周期详解
08-30
- `componentWillUnmount`：在组件从DOM中移除前调用，用于清理可能的定时器、事件监听器等资源，防止内存泄漏。 掌握这些生命周期方法可以帮助开发者更精确地控制组件的行为。例如，`componentDidMount`和`...
react-将ReactNativeAPI变为ReactHooks用于无状态React组件
08-14
在React世界中，React Hooks是自React 16.8版本以来引入的一种创新特性，它允许我们在不使用类组件的情况下，使用状态和其他React生命周期方法。本主题“将React Native API变为React Hooks，用于无状态React组件”...
react-使用简单的组件测量使用控件的React渲染生命周期
08-15
- `componentWillUnmount()`: 在组件卸载或销毁前调用，用于清理定时器、取消网络请求或删除监听器等。 文件列表中的"rn-render-perfs-master"可能是一个示例项目，用于演示如何创建一个简单的React Native组件来...
VUE清除组件内部定时器
weixin_30624825的博客
01-16 1285
　　定时器如果不手动清除，只会在离开当前页面或者F5刷新后才会清除。由于vue项目是SPA应用，离开当前组件后并不会清除定时器，所以需要我们手动去清除定时器。但当我们将清除定时器clearInterval或clearTimeout写入组件的生命周期destroyed内部时并不能清除定时器，直接写window.clearXXX也并不是很好使。网上查了好久，有前辈给出需要将清除定时器写在路由钩子函数里...
JS定时器先清除在设置的原因解析
zw686668的博客
08-01 2189
在做一个domobj动态效果的时候，事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器，所以每生成一次事件需要清除一次定时器，达到始终保持事件里只有一个定时器。 参考代码两个定时器的作用： 注意：此时就是先清除定时器，原因是是再次点击产生事件的时候第一个事件没有运行结束，会接着产生第二个定时器，作用是把上一次的定时器清除，因为一个事件里只能有一个定时器。 注意：此时定时器的作用是当设置的定时器在一个事件里执行完毕时清除的作用。 此时还有一个需要注意的点可能会有人会问，为什么第一个定时器没有用v
JS的定时器和清除定时器
前端菜鸡的博客
06-10 5501
在我们的项目开发中，难免会需要按周期执行一些代码，这就需要定时器这个功能。 常用的定时器有2种 setTimeout(function() {}, 1000); //一秒钟以后执行一次 setInterval(function() {}, 1000); //每一秒钟执行一次 //需要注意的是这里说的一秒是大约一秒，定时器还是会有细微的时间差 下面通过一个小demo来看一下效果 &l...
React 动态增加，删除，上下移动dom <li><td>
热门推荐
liuyuqin1991的专栏
12-19 2万+
思想在react的世界里，都是状态变更（数据变更）来驱动dom变化，动态添加dom不像以前用jquery一样append一个<li>或者一个<td> 这样了，而是通过装载<li> 或者<td> 数据数组[]来动态添加dom，下面的例子实现使用了antd的组件库 参考：https://ant.design/components/form-cn/#components-form-demo-dynami
react组件卸载调用的方法_在 React 组件中如何使用 Refs
weixin_39629679的博客
10-21 330
英文：Yomi Eluwande 译文：joking_zhang使用 React 时，我们的默认思维方式应该是 不会强制修改 DOM ，而是通过传入 props 重新渲染组件。但是，有些情况却无法避免修改 DOM 。React 中的 Refs 提供了一种访问 render() 方法中创建的 React 元素(或 DOM 节点)的方法。当父组件需要与子组件交互时，我们通常使用 props 来传递相关...
记录react18监听事件取消失败
xiaofan_queen的博客
09-19 569
记录react18监听事件取消失败
React如何给某些元素动态添加和删除类？
DangR_Jisoo的博客
12-15 1993
React如何给某些元素动态添加和删除类？
【React基础入门】
regretTAT的博客
06-18 633
React是一款用于构建用户界面的 JavaScript 库，使用它是因为官方CDN链接 组件写法 未完待续~~~
react 组件卸载阶段
最新发布
04-30
1. componentWillUnmount()：在组件卸载之前执行，用于清理组件的定时器、事件监听器等资源。 2. componentDidUnmount()：在组件卸载之后执行，用于处理一些异步操作的回调函数，如 setTimeout 和 Promise 等。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小歌谣

放弃很容易 但是坚持一定很酷

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值