refactor: 去掉memo

Author: Ohh-889

src/components/ButtonIcon.tsx

@@ -36,48 +36,45 @@ const computeClass = (className: string) => {
 
 /** - 生成复用的button */
 
-const ButtonIcon: FC<Props> = memo(
-  ({
-    children,
-    className = 'h-36px text-icon',
-    icon,
-    style,
-    tooltipContent,
-    tooltipPlacement = 'bottom',
-    triggerParent,
-    zIndex = 98,
-    ...rest
-  }) => {
-    const cls = computeClass(className);
+const ButtonIcon = ({
+  children,
+  className = 'h-36px text-icon',
+  icon,
+  style,
+  tooltipContent,
+  tooltipPlacement = 'bottom',
+  triggerParent,
+  zIndex = 98,
+  ...rest
+}: Props) => {
+  const cls = computeClass(className);
 
-    function getPopupContainer(triggerNode: HTMLElement) {
-      return triggerParent ? triggerNode.parentElement! : document.body;
-    }
-
-    return (
-      <ATooltip
-        getPopupContainer={getPopupContainer}
-        placement={tooltipPlacement}
-        title={tooltipContent}
-        zIndex={zIndex}
-      >
-        <AButton
-          className={cls}
-          type="text"
-          {...rest}
-        >
-          <div className="flex-center gap-8px">
-            {children || (
-              <SvgIcon
-                icon={icon}
-                style={style}
-              />
-            )}
-          </div>
-        </AButton>
-      </ATooltip>
-    );
+  function getPopupContainer(triggerNode: HTMLElement) {
+    return triggerParent ? triggerNode.parentElement! : document.body;
   }
-);
 
+  return (
+    <ATooltip
+      getPopupContainer={getPopupContainer}
+      placement={tooltipPlacement}
+      title={tooltipContent}
+      zIndex={zIndex}
+    >
+      <AButton
+        className={cls}
+        type="text"
+        {...rest}
+      >
+        <div className="flex-center gap-8px">
+          {children || (
+            <SvgIcon
+              icon={icon}
+              style={style}
+            />
+          )}
+        </div>
+      </AButton>
+    </ATooltip>
+  );
+};
 export default ButtonIcon;

src/components/SvgIcon.tsx

@@ -1,11 +1,6 @@
 import { Icon } from '@iconify/react';
 import type { CSSProperties } from 'react';
-/**
- * Props
- *
- * - Support iconify and local svg icon
- * - If icon and localIcon are passed at the same time, localIcon will be rendered first
- */
+
 interface Props {
   readonly className?: string;
   /** Iconify icon name */
@@ -16,12 +11,21 @@ interface Props {
 }
 
 const defaultLocalIcon = 'no-icon';
+
 const { VITE_ICON_LOCAL_PREFIX: prefix } = import.meta.env;
+
 const symbolId = (localIcon: string = defaultLocalIcon) => {
   const iconName = localIcon || defaultLocalIcon;
 
   return `#${prefix}-${iconName}`;
 };
+
+/**
+ * Props
+ *
+ * - Support iconify and local svg icon
+ * - If icon and localIcon are passed at the same time, localIcon will be rendered first
+ */
 const SvgIcon = ({ icon, localIcon, ...props }: Props) => {
   /** If localIcon is passed, render localIcon first */
   return localIcon || !icon ? (

src/components/SystemLogo.tsx

@@ -1,35 +1,7 @@
-import * as motion from 'motion/react-m';
+import type { SVGProps } from 'react';
 
-const SystemLogo = memo((props: { className?: string }) => {
-  const [hideStroke, { setTrue }] = useBoolean();
-
-  const draw = {
-    animate: { fill: 'currentColor', pathLength: 1 },
-    fill: 'transparent',
-    initial: { fill: 'transparent', pathLength: 0 },
-    stroke: hideStroke ? 'none' : 'currentColor',
-    strokeWidth: '2',
-    transition: {
-      fill: { delay: 2, duration: 1, ease: 'easeInOut' },
-      pathLength: { duration: 2, ease: 'easeInOut' }
-    }
-  };
-  return (
-    <motion.svg
-      viewBox="0 0 160 160"
-      {...props}
-    >
-      <motion.path
-        {...draw}
-        d="M81.28 55.9c-.1-11.67-2.93-22.55-9.37-32.38-1-1.5-2.14-2.86-2.5-4.71a8.1 8.1 0 014-8.61 7.89 7.89 0 019.3 1.23 35.999 35.999 0 015.9 8.83 75.18 75.18 0 018.44 28.58 83.211 83.211 0 01-5.23 36.74 102.983 102.983 0 01-3 7.28 1.2 1.2 0 000 1.41c9.58 13.3 21.76 23 37.85 27.24a54.37 54.37 0 0019.68 1.57 7.72 7.72 0 018.36 6.9 7.903 7.903 0 01-6.7 9 64.744 64.744 0 01-23-1.33 77.68 77.68 0 01-36.93-19.88 93.628 93.628 0 01-11.91-13.71 2.18 2.18 0 00-2.3-1.06 72.744 72.744 0 00-27.38 7.55c-11.6 6-20.67 14.58-26.4 26.45a10.134 10.134 0 01-3.7 4.7 8 8 0 01-9.19-.7 7.86 7.86 0 01-2.36-9.28 60.324 60.324 0 018.72-14.52c12.2-15.43 28.21-24.59 47.32-28.57A85.085 85.085 0 0173.07 87c.524.015 1-.307 1.18-.8a76.06 76.06 0 006.53-22.3c.351-2.652.518-5.325.5-8z"
-      />
-      <motion.path
-        {...draw}
-        d="M136.26 108.34a44.742 44.742 0 01-11.13-2.87 46.108 46.108 0 01-19.66-13.76 8 8 0 015.72-13.22 7.93 7.93 0 016.54 2.93 33.27 33.27 0 0018.87 10.75c1.546.155 3.058.553 4.48 1.18a8.08 8.08 0 013.84 9.21c-.92 3.52-4.13 5.81-8.66 5.78zm-80.6-75.02a7.61 7.61 0 016.64 5 49.139 49.139 0 013.64 17 46.33 46.33 0 01-2.46 17.28c-2 5.77-8.24 7.79-12.89 4.15a8.1 8.1 0 01-2.39-9 31.679 31.679 0 001.68-12.36 35.77 35.77 0 00-2.43-11c-2.1-5.45 1.75-11.07 8.21-11.07zm22.26 93.25a8 8 0 01-6.68 7.86 32.88 32.88 0 00-19.7 12.19 8.13 8.13 0 01-11.21 1.62 8 8 0 01-1.41-11.58A51.043 51.043 0 0154 123.81a45.842 45.842 0 0114-5.1c5.35-1.04 9.91 2.56 9.92 7.86z"
-        onAnimationComplete={setTrue}
-      />
-    </motion.svg>
-  );
-});
+const SystemLogo = (props: SVGProps<SVGSVGElement>) => {
+  return <IconLocalLogo {...props} />;
+};
 
 export default SystemLogo;

src/components/WaveBg.tsx

@@ -5,7 +5,7 @@ interface Props {
   themeColor: string;
 }
 
-const WaveBg = memo(({ themeColor }: Props) => {
+const WaveBg = ({ themeColor }: Props) => {
   const lightColor = getPaletteColorByNumber(themeColor, 200);
   const darkColor = getPaletteColorByNumber(themeColor, 500);
 
@@ -93,6 +93,6 @@ const WaveBg = memo(({ themeColor }: Props) => {
       </div>
     </div>
   );
-});
+};
 
 export default WaveBg;