perf(Company): 优化渲染性能和 API 请求
- StockQuoteCard: 添加 memo 包装减少重渲染 - Company/index: componentProps 使用 useMemo 缓存 - useCompanyEvents: 页面浏览事件只触发一次,避免重复追踪 - useCompanyData: 自选股状态改用单股票查询接口,减少数据传输 - CompanyHeader: inputCode 状态下移到 SearchActions,减少父组件重渲染 - CompanyHeader: 移除重复环境光效果,由全局 AmbientGlow 统一处理 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -9,7 +9,7 @@
|
||||
* - HeroUI 现代组件风格
|
||||
*/
|
||||
|
||||
import React, { memo, useCallback, useRef, useEffect } from 'react';
|
||||
import React, { memo, useCallback, useRef, useEffect, useMemo } from 'react';
|
||||
|
||||
// FUI 动画样式
|
||||
import './theme/fui-animations.css';
|
||||
@@ -36,37 +36,42 @@ interface CompanyContentProps {
|
||||
onTabChange: (index: number, tabKey: string) => void;
|
||||
}
|
||||
|
||||
const CompanyContent = memo<CompanyContentProps>(({
|
||||
const CompanyContent: React.FC<CompanyContentProps> = memo(({
|
||||
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>
|
||||
}) => {
|
||||
// 缓存 componentProps,避免每次渲染创建新对象
|
||||
const memoizedComponentProps = useMemo(() => ({ stockCode }), [stockCode]);
|
||||
|
||||
{/* Tab 内容区 - 使用 FuiContainer */}
|
||||
<FuiContainer variant="default">
|
||||
<SubTabContainer
|
||||
tabs={TAB_CONFIG}
|
||||
componentProps={{ stockCode }}
|
||||
onTabChange={onTabChange}
|
||||
themePreset="blackGold"
|
||||
contentPadding={0}
|
||||
isLazy={true}
|
||||
/>
|
||||
</FuiContainer>
|
||||
</Box>
|
||||
));
|
||||
return (
|
||||
<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={memoizedComponentProps}
|
||||
onTabChange={onTabChange}
|
||||
themePreset="blackGold"
|
||||
contentPadding={0}
|
||||
isLazy={true}
|
||||
/>
|
||||
</FuiContainer>
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
|
||||
CompanyContent.displayName = 'CompanyContent';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user