如何根据用户在线状态控制Modal显隐？求正确实现方案

现有代码的问题 #

• 直接在组件函数内调用modal()会导致每次组件渲染都重复执行，造成不必要的网络请求。
• checkOnline.js中的全局事件监听器仅打印日志，没有关联到组件的状态更新逻辑，无法触发Modal状态变化。
• 未处理组件卸载时的事件监听清理，可能引发内存泄漏。

优化方案 #

1. 移除全局事件监听：将online/offline事件的监听逻辑移到组件内部，避免全局副作用。
2. 使用useEffect管理事件与初始检查：通过useEffect在组件挂载时注册事件监听、执行初始在线状态检查，卸载时移除监听。
3. 同步状态更新逻辑：在线/离线状态切换时，调用isOnline确认真实网络状态，再更新Modal的可见性。

修改后的代码 #

checkOnline.js

export const isOnline = async () => {
    if (!window.navigator.onLine) return false;

    // 避免CORS错误，请求自身域名
    const url = new URL(window.location.origin);

    // 添加随机参数防止缓存
    url.searchParams.set('rand', Date.now());
    
    try {
        const response = await fetch(url.toString(), { method: 'HEAD' });
        return response.ok;
    } catch {
        return false;
    }
};

App.js

import { useState, useEffect } from 'react';
import { isOnline } from "../../helpers/CheckOnline";

export default function App() {
  const [isModalVisible, setIsModalVisible] = useState(false);

  // 封装状态更新逻辑
  const updateModalVisibility = async () => {
    const online = await isOnline();
    // 离线时隐藏Modal，在线时可根据需求调整（示例中保持隐藏，可自行修改逻辑）
    setIsModalVisible(online);
  };

  useEffect(() => {
    // 初始渲染时检查在线状态
    updateModalVisibility();

    // 注册在线/离线事件监听
    window.addEventListener('online', updateModalVisibility);
    window.addEventListener('offline', updateModalVisibility);

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      window.removeEventListener('online', updateModalVisibility);
      window.removeEventListener('offline', updateModalVisibility);
    };
  }, []); // 空依赖数组确保仅在组件挂载/卸载时执行

  return (
    <div className="App">
      <Modal centered visible={isModalVisible}>
        <p>test</p>
      </Modal>
    </div>
  );
}

关键说明 #

• useEffect的空依赖数组[]确保事件监听仅注册一次，初始状态检查也只执行一次。
• updateModalVisibility函数封装了状态更新的核心逻辑，避免代码重复，同时保证在线/离线切换时都会触发真实网络状态校验。
• 移除全局事件监听后，组件的副作用完全由自身管理，更符合React组件的封装原则。

内容的提问来源于stack exchange，提问作者Marizona