diff --git a/src/components/SubTabContainer/index.tsx b/src/components/SubTabContainer/index.tsx index d21b49ad..276a56d2 100644 --- a/src/components/SubTabContainer/index.tsx +++ b/src/components/SubTabContainer/index.tsx @@ -118,6 +118,11 @@ const SubTabContainer: React.FC = memo(({ // 当前索引 const currentIndex = controlledIndex ?? internalIndex; + // 记录已访问的 Tab 索引(用于真正的懒加载) + const [visitedTabs, setVisitedTabs] = useState>( + () => new Set([controlledIndex ?? defaultIndex]) + ); + // 合并主题 const theme: SubTabTheme = { ...THEME_PRESETS[themePreset], @@ -132,6 +137,12 @@ const SubTabContainer: React.FC = memo(({ const tabKey = tabs[newIndex]?.key || ''; onTabChange?.(newIndex, tabKey); + // 记录已访问的 Tab(用于懒加载) + setVisitedTabs(prev => { + if (prev.has(newIndex)) return prev; + return new Set(prev).add(newIndex); + }); + if (controlledIndex === undefined) { setInternalIndex(newIndex); } @@ -197,11 +208,16 @@ const SubTabContainer: React.FC = memo(({ - {tabs.map((tab) => { + {tabs.map((tab, idx) => { const Component = tab.component; + // 懒加载:只渲染已访问过的 Tab + const shouldRender = !isLazy || visitedTabs.has(idx); + return ( - {Component ? : null} + {shouldRender && Component ? ( + + ) : null} ); })}