perf(Company): 恢复 CompanyContent 的 memo 包装

- 将主内容区提取为独立的 memo 包装组件
- 避免父组件状态变化导致不必要的重渲染
- 提升页面性能

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-18 18:43:05 +08:00
parent 2720946ccf
commit c979e775a5

View File

@@ -24,6 +24,52 @@ import CompanyHeader from './components/CompanyHeader';
import StockQuoteCard from './components/StockQuoteCard';
import { THEME, TAB_CONFIG } from './config';
// ============================================
// 主内容区组件 - FUI 风格
// ============================================
interface CompanyContentProps {
stockCode: string;
isInWatchlist: boolean;
watchlistLoading: boolean;
onWatchlistToggle: () => void;
onTabChange: (index: number, tabKey: string) => void;
}
const CompanyContent = memo<CompanyContentProps>(({
stockCode,
isInWatchlist,
watchlistLoading,
onWatchlistToggle,
onTabChange,
}) => (
<Box maxW="container.xl" mx="auto" px={4} py={6}>
{/* 股票行情卡片 - 放在 Tab 切换器上方,始终可见 */}
<Box mb={6}>
<StockQuoteCard
stockCode={stockCode}
isInWatchlist={isInWatchlist}
isWatchlistLoading={watchlistLoading}
onWatchlistToggle={onWatchlistToggle}
/>
</Box>
{/* Tab 内容区 - 使用 FuiContainer */}
<FuiContainer variant="default">
<SubTabContainer
tabs={TAB_CONFIG}
componentProps={{ stockCode }}
onTabChange={onTabChange}
themePreset="blackGold"
contentPadding={0}
isLazy={true}
/>
</FuiContainer>
</Box>
));
CompanyContent.displayName = 'CompanyContent';
// ============================================
// 主页面组件
// ============================================
@@ -116,29 +162,13 @@ const CompanyIndex: React.FC = () => {
{/* 主内容区 */}
<Box position="relative" zIndex={1}>
<Box maxW="container.xl" mx="auto" px={4} py={6}>
{/* 股票行情卡片 - 放在 Tab 切换器上方,始终可见 */}
<Box mb={6}>
<StockQuoteCard
stockCode={stockCode}
isInWatchlist={isInWatchlist}
isWatchlistLoading={watchlistLoading}
onWatchlistToggle={handleWatchlistToggle}
/>
</Box>
{/* Tab 内容区 - 使用 FuiContainer */}
<FuiContainer variant="default">
<SubTabContainer
tabs={TAB_CONFIG}
componentProps={{ stockCode }}
onTabChange={handleTabChange}
themePreset="blackGold"
contentPadding={0}
isLazy={true}
/>
</FuiContainer>
</Box>
<CompanyContent
stockCode={stockCode}
isInWatchlist={isInWatchlist}
watchlistLoading={watchlistLoading}
onWatchlistToggle={handleWatchlistToggle}
onTabChange={handleTabChange}
/>
</Box>
</Box>
);