perf: 优化各 Tab 数据加载为按需请求
MarketDataView (股票行情): - 初始只加载 summary + tradeData(2个接口) - funding/bigDeal/unusual/pledge 数据在切换 Tab 时按需加载 - 新增 loadDataByType 方法支持懒加载 FinancialPanorama (财务全景): - 初始只加载 stockInfo + metrics + comparison + mainBusiness(4个接口) - 从9个接口优化到4个接口 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -68,8 +68,25 @@ const MarketDataView: React.FC<MarketDataViewProps> = ({ stockCode: propStockCod
|
||||
analysisMap,
|
||||
refetch,
|
||||
loadMinuteData,
|
||||
loadDataByType,
|
||||
} = useMarketData(stockCode, selectedPeriod);
|
||||
|
||||
// Tab 切换时按需加载数据
|
||||
const handleTabChange = useCallback((index: number) => {
|
||||
setActiveTab(index);
|
||||
// 根据 tab index 加载对应数据
|
||||
const tabDataMap: Record<number, 'funding' | 'bigDeal' | 'unusual' | 'pledge'> = {
|
||||
0: 'funding',
|
||||
1: 'bigDeal',
|
||||
2: 'unusual',
|
||||
3: 'pledge',
|
||||
};
|
||||
const dataType = tabDataMap[index];
|
||||
if (dataType) {
|
||||
loadDataByType(dataType);
|
||||
}
|
||||
}, [loadDataByType]);
|
||||
|
||||
// 监听 props 中的 stockCode 变化
|
||||
useEffect(() => {
|
||||
if (propStockCode && propStockCode !== stockCode) {
|
||||
@@ -173,7 +190,7 @@ const MarketDataView: React.FC<MarketDataViewProps> = ({ stockCode: propStockCod
|
||||
componentProps={componentProps}
|
||||
themePreset="blackGold"
|
||||
index={activeTab}
|
||||
onTabChange={(index) => setActiveTab(index)}
|
||||
onTabChange={handleTabChange}
|
||||
isLazy
|
||||
/>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user