项目优化之监听tab切出事件

【场景进入】

项目中有页面用到了自动订阅数据
有天我回家时忘了关闭该页面，页面整晚一直在订阅和推送数据，最终导致后台出现了问题，好像订阅数据太多导致nats服务起不来了，我的前端页面也出现了报错。。。

，于是我就准备来进行优化一下

【搞活思路】

首先的思路是当用户切出页面时就自动取消订阅，重新进入时又自动开始订阅，为了保持数据准确，每次进入时又自动刷新一下，重新获取最新数据后再开始订阅

首先想到的是useEffect中的return,但这玩意是在组件卸载的时候才会触发，当用户切换tab页的时候是不会触发的。。。

在网上查找了资料发现可以通过浏览器监听的visibilitychange事件来解决
https://juejin.cn/post/6844903962403946503
也就是浏览器里在当前标签页切换时，会触发 visibilitychange 事件

【浅开一下】

以下是我结合项目的使用，着急的小伙伴可直接跳步到【收】收看😄

【开】

useEffect(() => {
	//监听当页面tab是否被切出
	window.addEventListener('visibilitychange', (e) => {
		console.log('页面是否切出', document.hidden);
		if (!document.hidden) {
			//重新获取一下数据
			(async () => {
				await fetchData({
					page: 1,
					per_page: PAGE_SIZE,
					search: search || undefined,
					sorted_by: 'desc',
				});
			})();
			//开始订阅可以在这里处理，但我写到后面了，效果是一样的哈
		}
	});
	
	return () => {
		//卸载组件时记得移除事件监听哦
		window.removeEventListener('visibilitychange', (e) => 		{});
		};
}, []);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

useEffect(() => {
    if (!document.hidden) {
        //订阅，其实这里可以和上一步合并起来，但由于我的订阅需要其他的判断，综合考虑还是分开来写了，小伙伴们可以不用管
    } else{
        //取消订阅
    }
}, [document.hidden]);
1
2
3
4
5
6
7

也算是为后台小哥做出了一点点🤏贡献啦，哈哈

【收】
其实总结起来就几行代码

useEffect(() => {
    window.addEventListener('visibilitychange', (e) => {
        if (!document.hidden) {
            //进入页面
            //订阅
        } else{
            //取消订阅
        }
    })

	return () => {
		//卸载组件时记得移除事件监听哦
		window.removeEventListener('visibilitychange', (e) => 		{});
	};
}, []);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

【参】
https://juejin.cn/post/6844903962403946503