Merge pull request #17 from mark980828/master

optimize: Reduce performance issues caused by tab switching.
rashagu · Oct 11, 2024 · 9af7022 · 9af7022
2 parents f2c2384 + 124381c
commit 9af7022
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/packages/semi-ui-vue/src/components/tabs/TabPane.tsx b/packages/semi-ui-vue/src/components/tabs/TabPane.tsx
@@ -71,8 +71,9 @@ const TabPane = defineComponent({
       return lazyRender ? _active : true;
     };
 
+    const ChildCache = defineComponent(() => () => slots.default?.());
+
     return () => {
-      const children = slots.default?.();
       const { tabPaneMotion: motion, tabPosition, prevActiveKey } = context.value;
       const { className, style, itemKey, tabIndex, ...restProps } = props;
       const active = context.value.activeKey === itemKey;
@@ -103,6 +104,7 @@ const TabPane = defineComponent({
         (tabPane) => tabPane.itemKey === prevActiveKey
       );
       const hasMotion = motion && active && !isActivatedBecauseOtherTabPaneRemoved && !context.value.forceDisableMotion;
+
       return (
         <div
           role="tabpanel"
@@ -127,7 +129,7 @@ const TabPane = defineComponent({
                   x-semi-prop="children"
                   {...animationEventsNeedBind}
                 >
-                  {shouldRender ? children : null}
+                  {shouldRender ? <ChildCache/> : null}
                 </div>
               );
             }}