⚡ perf: 优化 createStyles 性能，避免重复渲染

src/functions/createStyles.ts

@@ -49,32 +49,34 @@ export const createStyles =
   (props?: Props): ReturnStyles<Input> => {
     const theme = useTheme();
 
-    let styles: ReturnStyleToUse<Input>;
+    const styles = useMemo(() => {
+      let tempStyles: ReturnStyleToUse<Input>;
 
-    if (styleOrGetStyleFn instanceof Function) {
-      const { stylish, appearance, ...token } = theme;
+      if (styleOrGetStyleFn instanceof Function) {
+        const { stylish, appearance, ...token } = theme;
 
-      styles = styleOrGetStyleFn(
-        { token, stylish, appearance, cx, css, injectGlobal },
-        props,
-      ) as any;
-    } else {
-      styles = styleOrGetStyleFn as any;
-    }
+        tempStyles = styleOrGetStyleFn(
+          { token, stylish, appearance, cx, css, injectGlobal },
+          props,
+        ) as any;
+      } else {
+        tempStyles = styleOrGetStyleFn as any;
+      }
 
-    if (typeof styles === 'object') {
-      styles = Object.fromEntries(
-        Object.entries(styles).map(([key, value]) => {
-          if (typeof value === 'object') {
-            return [key, css(value as CSSObject)];
-          }
+      if (typeof tempStyles === 'object') {
+        tempStyles = Object.fromEntries(
+          Object.entries(tempStyles).map(([key, value]) => {
+            if (typeof value === 'object') {
+              return [key, css(value as CSSObject)];
+            }
 
-          return [key, value];
-        }),
-      ) as any;
-    }
+            return [key, value];
+          }),
+        ) as any;
+      }
 
-    return useMemo(() => {
-      return { styles, cx, theme };
-    }, [styles, theme, props]);
+      return tempStyles;
+    }, [styleOrGetStyleFn, props, theme]);
+
+    return useMemo(() => ({ styles, cx, theme }), [styles, theme]);
   };

src/hooks/useAntdTheme.ts

@@ -1,10 +1,11 @@
 import { AntdTheme } from '@/types';
+import { useMemo } from 'react';
 import { useAntdStylish } from './useAntdStylish';
 import { useAntdToken } from './useAntdToken';
 
 export const useAntdTheme = (): AntdTheme => {
   const token = useAntdToken();
   const antdStylish = useAntdStylish();
 
-  return { stylish: antdStylish, ...token };
+  return useMemo(() => ({ stylish: antdStylish, ...token }), [token, antdStylish]);
 };

src/hooks/useTheme.ts

@@ -1,6 +1,7 @@
 import { Theme } from '@/types';
 import { useTheme as _useTheme } from '@emotion/react';
 
+import { useMemo } from 'react';
 import { useAntdTheme } from './useAntdTheme';
 import { useThemeMode } from './useThemeMode';
 
@@ -9,9 +10,11 @@ export const useTheme = (): Theme => {
   const themeState = useThemeMode();
   const defaultTheme = _useTheme();
 
+  const initTheme = useMemo(() => ({ ...antdTheme, ...themeState }), [antdTheme, themeState]);
+
   //  如果是个空值，说明没有套 Provider，返回 antdTheme 的默认值
   if (Object.keys(defaultTheme).length === 0) {
-    return { ...antdTheme, ...themeState };
+    return initTheme;
   }
 
   return defaultTheme as Theme;