⚡ perf: test remove hook

ant-design · Dec 1, 2024 · 51329dc · 51329dc
1 parent 1f71391
commit 51329dc
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 97 deletions.
diff --git a/src/factories/createThemeProvider/AntdProvider.tsx b/src/factories/createThemeProvider/AntdProvider.tsx
@@ -1,72 +1,66 @@
-import { ConfigProvider, message, Modal, notification, theme, ThemeConfig } from 'antd';
-import { memo, useEffect, useMemo, type FC } from 'react';
+import { ConfigProvider, theme, ThemeConfig } from 'antd';
+import { memo, useLayoutEffect, useMemo, type FC } from 'react';
 
 import { useThemeMode } from '@/hooks';
 import type { ThemeProviderProps } from './type';
 
-type AntdProviderProps = Pick<
-  ThemeProviderProps<any>,
-  'theme' | 'prefixCls' | 'getStaticInstance' | 'children' | 'staticInstanceConfig'
->;
+type AntdProviderProps = Pick<ThemeProviderProps<any>, 'theme' | 'prefixCls' | 'children'>;
 
-const AntdProvider: FC<AntdProviderProps> = memo(
-  ({ children, theme: themeProp, prefixCls, getStaticInstance, staticInstanceConfig }) => {
-    const { appearance, isDarkMode } = useThemeMode();
+const Provider: FC<AntdProviderProps> = memo(({ children, theme: themeProp, prefixCls }) => {
+  const { appearance, isDarkMode } = useThemeMode();
 
-    const [messageInstance, messageContextHolder] = message.useMessage(
-      staticInstanceConfig?.message,
-    );
-    const [notificationInstance, notificationContextHolder] = notification.useNotification(
-      staticInstanceConfig?.notification,
-    );
-    const [modalInstance, modalContextHolder] = Modal.useModal();
+  // 获取 antd 主题
+  const antdTheme = useMemo<ThemeConfig>(() => {
+    const baseAlgorithm = isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm;
 
-    useEffect(() => {
-      getStaticInstance?.({
-        message: messageInstance,
-        modal: modalInstance,
-        notification: notificationInstance,
-      });
-    }, []);
+    let antdTheme = themeProp as ThemeConfig | undefined;
 
-    // 获取 antd 主题
-    const antdTheme = useMemo<ThemeConfig>(() => {
-      const baseAlgorithm = isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm;
+    if (typeof themeProp === 'function') {
+      antdTheme = themeProp(appearance);
+    }
 
-      let antdTheme = themeProp as ThemeConfig | undefined;
+    if (!antdTheme) {
+      return { algorithm: baseAlgorithm };
+    }
 
-      if (typeof themeProp === 'function') {
-        antdTheme = themeProp(appearance);
-      }
+    // 如果有 themeProp 说明是外部传入的 theme，需要对算法做一个合并处理，因此先把 themeProp 的算法规整为一个数组
+    const algoProp = !antdTheme.algorithm
+      ? []
+      : antdTheme.algorithm instanceof Array
+      ? antdTheme.algorithm
+      : [antdTheme.algorithm];
 
-      if (!antdTheme) {
-        return { algorithm: baseAlgorithm };
-      }
+    return {
+      ...antdTheme,
+      algorithm: !antdTheme.algorithm ? baseAlgorithm : [baseAlgorithm, ...algoProp],
+    };
+  }, [themeProp, isDarkMode]);
 
-      // 如果有 themeProp 说明是外部传入的 theme，需要对算法做一个合并处理，因此先把 themeProp 的算法规整为一个数组
-      const algoProp = !antdTheme.algorithm
-        ? []
-        : antdTheme.algorithm instanceof Array
-        ? antdTheme.algorithm
-        : [antdTheme.algorithm];
+  return (
+    <ConfigProvider prefixCls={prefixCls} theme={antdTheme}>
+      {children}
+    </ConfigProvider>
+  );
+});
 
-      return {
-        ...antdTheme,
-        algorithm: !antdTheme.algorithm ? baseAlgorithm : [baseAlgorithm, ...algoProp],
-      };
-    }, [themeProp, isDarkMode]);
+Provider.displayName = 'AntdProvider';
 
-    return (
-      <ConfigProvider prefixCls={prefixCls} theme={antdTheme}>
-        {messageContextHolder}
-        {notificationContextHolder}
-        {modalContextHolder}
-        {children}
-      </ConfigProvider>
-    );
-  },
-);
+const AntdProvider = memo<AntdProviderProps>(({ children, theme, prefixCls }) => {
+  useLayoutEffect(() => {
+    ConfigProvider.config({
+      holderRender: (children) => (
+        <Provider theme={theme} prefixCls={prefixCls}>
+          {children}
+        </Provider>
+      ),
+    });
+  }, [prefixCls, theme]);
 
-AntdProvider.displayName = 'AntdProvider';
+  return (
+    <Provider theme={theme} prefixCls={prefixCls}>
+      {children}
+    </Provider>
+  );
+});
 
 export default AntdProvider;
diff --git a/src/factories/createThemeProvider/index.tsx b/src/factories/createThemeProvider/index.tsx
@@ -51,9 +51,7 @@ export const createThemeProvider = (
       customStylish,
 
       theme,
-      getStaticInstance,
       prefixCls: outPrefixCls,
-      staticInstanceConfig,
 
       appearance,
       defaultAppearance,
@@ -94,12 +92,7 @@ export const createThemeProvider = (
             onAppearanceChange={onAppearanceChange}
             useTheme={option.useTheme}
           >
-            <AntdProvider
-              prefixCls={prefixCls}
-              staticInstanceConfig={staticInstanceConfig}
-              theme={theme}
-              getStaticInstance={getStaticInstance}
-            >
+            <AntdProvider prefixCls={prefixCls} theme={theme}>
               <TokenContainer
                 prefixCls={prefixCls}
                 customToken={customToken}

diff --git a/src/factories/createThemeProvider/type.ts b/src/factories/createThemeProvider/type.ts
@@ -7,9 +7,8 @@ import {
   ThemeMode,
 } from '@/types';
 import { ThemeConfig } from 'antd/es/config-provider/context';
-import { ConfigOptions as MessageConfig, MessageInstance } from 'antd/es/message/interface';
-import { ModalStaticFunctions } from 'antd/es/modal/confirm';
-import { NotificationConfig, NotificationInstance } from 'antd/es/notification/interface';
+import { ConfigOptions as MessageConfig } from 'antd/es/message/interface';
+import { NotificationConfig } from 'antd/es/notification/interface';
 import { ReactNode } from 'react';
 
 export interface ThemeProviderProps<T, S = Record<string, string>> {
@@ -32,12 +31,6 @@ export interface ThemeProviderProps<T, S = Record<string, string>> {
    */
   theme?: ThemeConfig | GetAntdTheme;
 
-  /**
-   * 从 ThemeProvider 中获取静态方法的实例对象
-   * @param instances
-   */
-  getStaticInstance?: (instances: StaticInstance) => void;
-
   /**
    * 静态方法的入参
    */
@@ -62,28 +55,3 @@ export interface ThemeProviderProps<T, S = Record<string, string>> {
   defaultThemeMode?: ThemeMode;
   onThemeModeChange?: (mode: ThemeMode) => void;
 }
-
-/**
- * 静态实例
- */
-export interface StaticInstance {
-  /**
-   * 消息实例
-   */
-  message: MessageInstance;
-  /**
-   * 通知实例
-   */
-  notification: NotificationInstance;
-  /**
-   * 弹窗实例，不包含 warn 方法
-   * @typedef {object} Omit<ModalStaticFunctions, 'warn'>
-   * @property {Function} info - info 弹窗
-   * @property {Function} success - success 弹窗
-   * @property {Function} error - error 弹窗
-   * @property {Function} warning - warning 弹窗
-   * @property {Function} confirm - confirm 弹窗
-   * @property {Function} destroyAll - 关闭所有弹窗
-   */
-  modal: Omit<ModalStaticFunctions, 'warn'>;
-}