From 124381c793d8e68d97ed948c32dd706a4a403b0f Mon Sep 17 00:00:00 2001
From: Mark <26443086@qq.com>
Date: Fri, 11 Oct 2024 01:53:47 +0800
Subject: [PATCH] optimize: Reduce performance issues caused by tab switching.

Signed-off-by: Mark <26443086@qq.com>
---
 packages/semi-ui-vue/src/components/tabs/TabPane.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/semi-ui-vue/src/components/tabs/TabPane.tsx b/packages/semi-ui-vue/src/components/tabs/TabPane.tsx
index 1cd63010..cdc90040 100644
--- 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>
               );
             }}