共计 1097 个字符,预计需要花费 3 分钟才能阅读完成。
原文链接:https://bobbyhadz.com/blog/react-handle-tab-close-event
作者:Borislav Hadzhiev
注释从这开始~
总览
在 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
事件进行监听,并在回调事件里做相应的逻辑解决。须要留神的是,须要在组件卸载时,勾销对事件的监听,避免内存透露状况的产生。