[v1.3] 改良代码 - subscribeMessage & HookManager

src/pages/batchupdate/App.tsx

@@ -17,8 +17,8 @@ import {
 } from "@App/app/service/service_worker/types";
 import { dayFormat } from "@App/pkg/utils/day_format";
 import { IconSync } from "@arco-design/web-react/icon";
-import { useAppContext } from "../store/AppContext";
 import { SCRIPT_STATUS_ENABLE } from "@App/app/repo/scripts";
+import { subscribeMessage } from "@App/pages/store/global";
 
 const CollapseItem = Collapse.Item;
 const { GridItem } = Grid;
@@ -29,8 +29,6 @@ const { Text } = Typography;
 const pageExecute: Record<string, (data: any) => void> = {};
 
 function App() {
-  const { subscribeMessage } = useAppContext();
-
   const AUTO_CLOSE_PAGE = 8; // after 8s, auto close
   const getUrlParam = (key: string): string => {
     return (location.search?.includes(`${key}=`) ? new URLSearchParams(location.search).get(`${key}`) : "") || "";

src/pages/options/routes/ScriptList/hooks.tsx

@@ -15,7 +15,7 @@ import type {
   TEnableScript,
   TSortedScript,
 } from "@App/app/service/queue";
-import { useAppContext } from "@App/pages/store/AppContext";
+import { subscribeMessage } from "@App/pages/store/global";
 import type { ScriptLoading } from "@App/pages/store/features/script";
 import {
   fetchScript,
@@ -49,10 +49,10 @@ import { Message } from "@arco-design/web-react";
 import { cacheInstance } from "@App/app/cache";
 import type { SearchType } from "@App/app/service/service_worker/types";
 import { SearchFilter, type SearchFilterRequest } from "./SearchFilter";
+import { HookManager } from "@App/pkg/utils/hookManger";
 
 export function useScriptList() {
   const { t } = useTranslation();
-  const { subscribeMessage } = useAppContext();
   const [scriptList, setScriptList] = useState<ScriptLoading[]>([]);
   const [loadingList, setLoadingList] = useState<boolean>(true);
 
@@ -188,18 +188,15 @@ export function useScriptList() {
       },
     };
 
-    const unhooks = [
+    const hookMgr = new HookManager();
+    hookMgr.append(
       subscribeMessage<TScriptRunStatus>("scriptRunStatus", pageApi.scriptRunStatus),
       subscribeMessage<TInstallScript>("installScript", pageApi.installScript),
       subscribeMessage<TDeleteScript[]>("deleteScripts", pageApi.deleteScripts),
       subscribeMessage<TEnableScript[]>("enableScripts", pageApi.enableScripts),
-      subscribeMessage<TSortedScript[]>("sortedScripts", pageApi.sortedScripts),
-    ];
-    return () => {
-      for (const unhook of unhooks) unhook();
-      unhooks.length = 0;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      subscribeMessage<TSortedScript[]>("sortedScripts", pageApi.sortedScripts)
+    );
+    return hookMgr.unhook;
   }, []);
 
   const updateScripts = (uuids: string[], data: Partial<Script | ScriptLoading>) => {

src/pages/options/routes/Setting.tsx

@@ -13,16 +13,15 @@ import { blackListSelfCheck } from "@App/pkg/utils/match";
 import { obtainBlackList } from "@App/pkg/utils/utils";
 import CustomTrans from "@App/pages/components/CustomTrans";
 import { useSystemConfig } from "./utils";
-import { useAppContext } from "@App/pages/store/AppContext";
+import { subscribeMessage } from "@App/pages/store/global";
 import { SystemConfigChange, type SystemConfigKey } from "@App/pkg/config/config";
 import { type TKeyValue } from "@Packages/message/message_queue";
 import { useEffect, useMemo } from "react";
 import { systemConfig } from "@App/pages/store/global";
 import { initRegularUpdateCheck } from "@App/app/service/service_worker/regular_updatecheck";
+import { HookManager } from "@App/pkg/utils/hookManger";
 
 function Setting() {
-  const { subscribeMessage } = useAppContext();
-
   const [editorConfig, setEditorConfig, submitEditorConfig] = useSystemConfig("editor_config");
   const [cloudSync, setCloudSync, submitCloudSync] = useSystemConfig("cloud_sync");
   const [language, setLanguage, submitLanguage] = useSystemConfig("language");
@@ -84,7 +83,8 @@ function Setting() {
       script_menu_display_type: setScriptMenuDisplayType,
       editor_type_definition: setEditorTypeDefinition,
     };
-    const unhooks = [
+    const hookMgr = new HookManager();
+    hookMgr.append(
       subscribeMessage<TKeyValue<SystemConfigKey>>(
         SystemConfigChange,
         ({ key, value: _value }: TKeyValue<SystemConfigKey>) => {
@@ -102,12 +102,9 @@ function Setting() {
               });
           }
         }
-      ),
-    ];
-    return () => {
-      for (const unhook of unhooks) unhook();
-      unhooks.length = 0;
-    };
+      )
+    );
+    return hookMgr.unhook;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/pages/popup/App.tsx

@@ -22,9 +22,10 @@ import type { ScriptMenu, TPopupScript } from "@App/app/service/service_worker/t
 import { systemConfig } from "@App/pages/store/global";
 import { isChineseUser, localePath } from "@App/locales/locales";
 import { getCurrentTab } from "@App/pkg/utils/utils";
-import { useAppContext } from "../store/AppContext";
+import { subscribeMessage } from "@App/pages/store/global";
 import type { TDeleteScript, TEnableScript, TScriptRunStatus } from "@App/app/service/queue";
 import { SCRIPT_RUN_STATUS_RUNNING } from "@App/app/repo/scripts";
+import { HookManager } from "@App/pkg/utils/hookManger";
 
 const CollapseItem = Collapse.Item;
 
@@ -87,9 +88,8 @@ function App() {
     return url?.hostname ?? "";
   }, [currentUrl]);
 
-  const { subscribeMessage } = useAppContext();
   useEffect(() => {
-    let isMounted = true;
+    const hookMgr = new HookManager();
 
     const updateScriptList = (
       update: (item: ScriptMenu) => ScriptMenu | undefined,
@@ -118,7 +118,7 @@ function App() {
       });
     };
 
-    const unhooks = [
+    hookMgr.append(
       // 订阅脚本啟用状态变更（enableScripts），即时更新对应项目的 enable。
       subscribeMessage<TEnableScript[]>("enableScripts", (data) => {
         updateScriptList((item) => {
@@ -166,7 +166,7 @@ function App() {
           });
           if (!url) return;
           popupClient.getPopupData({ url, tabId }).then((resp) => {
-            if (!isMounted) return;
+            if (!hookMgr.isMounted) return;
 
             // 响应健全性检查：必须包含 scriptList，否则忽略此次更新
             if (!resp || !resp.scriptList) {
@@ -195,16 +195,16 @@ function App() {
             );
           });
         }
-      }),
-    ];
+      })
+    );
 
     const onCurrentUrlUpdated = (url: string, tabId: number) => {
       pageTabIdRef.current = tabId;
       checkScriptEnableAndUpdate();
       popupClient
         .getPopupData({ url, tabId })
         .then((resp) => {
-          if (!isMounted) return;
+          if (!hookMgr.isMounted) return;
 
           // 确保响应有效
           if (!resp || !resp.scriptList) {
@@ -225,14 +225,14 @@ function App() {
         })
         .catch((error) => {
           console.error("Failed to get popup data:", error);
-          if (!isMounted) return;
+          if (!hookMgr.isMounted) return;
           // 设为安全预设，避免 UI 因错误状态而崩溃
           setScriptList([]);
           setBackScriptList([]);
           setIsBlacklist(false);
         })
         .finally(() => {
-          if (!isMounted) return;
+          if (!hookMgr.isMounted) return;
           setLoading(false);
         });
     };
@@ -242,15 +242,15 @@ function App() {
         systemConfig.getEnableScript(),
         systemConfig.getCheckUpdate(),
       ]);
-      if (!isMounted) return;
+      if (!hookMgr.isMounted) return;
       setIsEnableScript(isEnableScript);
       setCheckUpdate(checkUpdate);
     };
     const queryTabInfo = async () => {
       // 仅在挂载时读取一次页签信息；不绑定 currentUrl 以避免重复查询
       try {
         const tab = await getCurrentTab();
-        if (!isMounted || !tab) return;
+        if (!hookMgr.isMounted || !tab) return;
         const newUrl = tab.url || "";
         setCurrentUrl((prev) => {
           if (newUrl !== prev) {
@@ -266,12 +266,8 @@ function App() {
 
     checkScriptEnableAndUpdate();
     queryTabInfo();
-    return () => {
-      isMounted = false;
-      for (const unhook of unhooks) unhook();
-      unhooks.length = 0;
-    };
-  }, [subscribeMessage]);
+    return hookMgr.unhook;
+  }, []);
 
   const { handleEnableScriptChange, handleSettingsClick, handleNotificationClick } = {
     handleEnableScriptChange: (val: boolean) => {

src/pages/store/AppContext.tsx

@@ -1,5 +1,7 @@
 import React, { useState, createContext, type ReactNode, useEffect, useContext } from "react";
 import { messageQueue } from "./global";
+import { HookManager } from "@App/pkg/utils/hookManger";
+import { subscribeMessage } from "@App/pages/store/global";
 
 export const fnPlaceHolder = {
   setEditorTheme: null,
@@ -9,7 +11,6 @@ export type ThemeParam = { theme: "auto" | "light" | "dark" };
 export interface AppContextType {
   colorThemeState: "auto" | "light" | "dark";
   updateColorTheme: (theme: "auto" | "light" | "dark") => void;
-  subscribeMessage: <T>(topic: string, handler: (msg: T) => void) => () => void;
   // 指引模式
   setGuideMode: (mode: boolean) => void;
   guideMode: boolean;
@@ -66,15 +67,6 @@ export const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
   });
   const [guideMode, setGuideMode] = useState(false);
 
-  const subscribeMessage = <T,>(topic: string, handler: (msg: T) => void) => {
-    return messageQueue.subscribe<T & { myMessage?: T }>(topic, (data) => {
-      const message = data?.myMessage || data;
-      if (typeof message === "object") {
-        handler(message as T);
-      }
-    });
-  };
-
   useEffect(() => {
     const pageApi = {
       onColorThemeUpdated({ theme }: ThemeParam) {
@@ -83,11 +75,10 @@ export const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
       },
     };
 
-    const unhooks = [subscribeMessage<ThemeParam>("onColorThemeUpdated", pageApi.onColorThemeUpdated)];
-    return () => {
-      for (const unhook of unhooks) unhook();
-      unhooks.length = 0;
-    };
+    const hookMgr = new HookManager();
+    hookMgr.append(subscribeMessage<ThemeParam>("onColorThemeUpdated", pageApi.onColorThemeUpdated));
+
+    return hookMgr.unhook;
   }, []);
 
   const updateColorTheme = (theme: "auto" | "light" | "dark") => {
@@ -100,7 +91,6 @@ export const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
       value={{
         colorThemeState,
         updateColorTheme,
-        subscribeMessage,
         setGuideMode,
         guideMode,
       }}

src/pages/store/global.ts

@@ -10,4 +10,13 @@ export const globalCache = new Map<string, any>();
 export const message = new ExtensionMessage();
 export const systemClient = new SystemClient(message);
 
+export const subscribeMessage = <T>(topic: string, handler: (msg: T) => void) => {
+  return messageQueue.subscribe<T & { myMessage?: T }>(topic, (data) => {
+    const message = data?.myMessage || data;
+    if (typeof message === "object") {
+      handler(message as T);
+    }
+  });
+};
+
 initLocales(systemConfig);

src/pkg/utils/hookManger.ts

@@ -0,0 +1,13 @@
+export class HookManager {
+  public isMounted: boolean = true;
+  private unhooks: ((...args: any) => any)[] | null = [];
+  public append(...fns: ((...args: any) => any)[]) {
+    this.unhooks!.push(...fns);
+  }
+  public readonly unhook = () => {
+    this.isMounted = false;
+    for (const unhook of this.unhooks!) unhook();
+    this.unhooks!.length = 0;
+    this.unhooks = null;
+  };
+}

tests/pages/options/MainLayout.test.tsx

@@ -66,6 +66,7 @@ vi.mock("@App/pages/store/global", () => ({
     error: vi.fn(),
     warning: vi.fn(),
   },
+  subscribeMessage: () => vi.fn(),
 }));
 
 vi.mock("@App/pkg/utils/utils", () => ({

tests/pages/popup/App.test.tsx

@@ -60,6 +60,7 @@ vi.mock("@App/pages/store/global", () => ({
     error: vi.fn(),
     warning: vi.fn(),
   },
+  subscribeMessage: () => vi.fn(),
 }));
 
 vi.mock("@App/pkg/utils/utils", () => ({