React技巧之处理tab页关闭事件
2023-02-18 16:41:36 时间
原文链接:https://bobbyhadz.com/blog/react-handle-tab-close-event
正文从这开始~
总览
在React中,处理浏览器tab页关闭事件:
- 使用
useEffect
钩子添加事件监听器。 - 监听
beforeunload
事件。 - 在即将卸载tab页时,会触发
beforeunload
事件。
import {useEffect} from 'react';
const App = () => {
useEffect(() => {
const handleTabClose = event => {
event.preventDefault();
console.log('beforeunload event triggered');
return (event.returnValue = 'Are you sure you want to exit?');
};
window.addEventListener('beforeunload', handleTabClose);
return () => {
window.removeEventListener('beforeunload', handleTabClose);
};
}, []);
return (
<div>
<h2>hello world</h2>
</div>
);
};
export default App;
我们在useEffect
钩子中为window
对象添加了一个事件监听器。我们为useEffect
钩子传递一个空的依赖数组,所以只会当组件挂载时运行。
beforeunload
当窗口或者tab页即将被卸载时,beforeunload
事件会被触发。这时,页面仍然是可见的,事件仍然是可以取消的。
这使我们能够打开一个对话框,询问用户是否真的想离开该页面。
用户可以确认并导航到新的页面,或者取消导航。需要注意的是,并不确定事件会被触发。比如说,用户可以在其浏览器设置中禁用弹出窗口。
我们使用addEventListener
方法在window
对象上添加一个事件监听器。该方法接受的第一个参数是要监听的事件的类型,第二个参数是一个函数,当指定类型的事件发生时被调用。
我们从useEffect
钩子返回的函数在组件卸载时被调用。我们使用removeEventListener
方法来移除我们之前注册的事件监听器。
清理步骤很重要,因为我们要确保我们的应用程序中没有任何内存泄漏。
总结
我们介绍了如何处理tab页关闭事件,主要是通过beforeunload
事件进行监听,并在回调事件里做相应的逻辑处理。需要注意的是,需要在组件卸载时,取消对事件的监听,防止内存泄漏情况的发生。
相关文章
- 忙活了一年的开源社区,终于赶上了春节前的末班车!
- ChatGPT 会开源吗?
- 7 款殿堂级的开源 CMS(内容管理系统)
- 请收下这 10 个安全相关的开源项目
- MySQL 5.7 升级到 8.0
- 越折腾越好用的 3 款开源 APP
- 10 款更先进的开源命令行工具
- 对开源框架跃跃欲试,却在写的时候犯了难?
- 一大波开源小抄来袭
- 物联网?快来看 Arduino 上云啦
- 想做钢铁侠?听说很多大佬都是用它入门的
- 写给小白的开源编译器
- 支持中文!秒建 wiki 知识库的开源项目,构建私人知识网络
- 一款开源的文件搜索神器,终于不用记 find 命令了
- 用一个文件,实现迷你 Web 框架
- 一个文件的开源项目,开启你的开源之旅
- 3.6 万颗星!开源 Web 服务器后起之秀,自带免费 HTTPS 开箱即用
- 狠人!标星 3.4 万的项目说删就删,几行代码搞崩数万个开源项目
- 那些年的开源项目,你跑起来了吗?
- 重玩 40 年前的经典游戏小蜜蜂,这次通关了源码