关于react.js:React技巧之处理tab页关闭事件

原文链接:https://bobbyhadz.com/blog/react-handle-tab-close-event

作者:Borislav Hadzhiev

注释从这开始~

总览

在React中,解决浏览器tab页敞开事件:

  1. 应用useEffect钩子增加事件监听器。
  2. 监听beforeunload事件。
  3. 在行将卸载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事件进行监听,并在回调事件里做相应的逻辑解决。须要留神的是,须要在组件卸载时,勾销对事件的监听,避免内存透露状况的产生。

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据