ce4da40ef6
- 新增 types.ts：API 类型定义、状态接口、Tab 映射常量 - 新增 hooks/useDeepAnalysisData.ts：提取数据获取逻辑 - 懒加载：按 Tab 按需请求 - 数据缓存：已加载数据不重复请求 - 竞态处理：stockCode 变更时防止旧请求覆盖 - 重写 index.tsx：memo 优化，代码行数 229 → 81 - 新增 README.md：组件文档 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
DeepAnalysis 组件
深度分析模块，展示公司战略分析、业务分析、产业链分析和发展历程。
目录结构
DeepAnalysis/
├── index.tsx # 主组件入口（memo 优化）
├── types.ts # 类型定义
├── README.md # 本文档
│
└── hooks/
├── index.ts # Hooks 导出
└── useDeepAnalysisData.ts # 数据获取 Hook（懒加载、缓存）
功能特性
| 特性 | 说明 |
|---|---|
| Tab 懒加载 | 切换 Tab 时按需加载数据 |
| 数据缓存 | 已加载的数据不重复请求 |
| 竞态处理 | stockCode 变更时防止旧请求覆盖新数据 |
| memo 优化 | 避免不必要的重渲染 |
API 接口映射
| Tab | API Key | 接口 |
|---|---|---|
| 战略分析 | comprehensive | /api/company/comprehensive-analysis |
| 业务分析 | comprehensive | 同上（共用） |
| 产业链 | valueChain | /api/company/value-chain-analysis |
| 发展历程 | keyFactors | /api/company/key-factors-timeline |
数据流
DeepAnalysis
├── useDeepAnalysisData (Hook)
│ ├── data: { comprehensive, valueChain, keyFactors, industryRank }
│ ├── loading: { comprehensive, valueChain, keyFactors, industryRank }
│ └── loadTabData(tabKey) → loadApiData(apiKey)
│
└── DeepAnalysisTab (展示组件)
├── StrategyTab
├── BusinessTab
├── ValueChainTab
└── DevelopmentTab
使用示例
import DeepAnalysis from '@views/Company/components/DeepAnalysis';
<DeepAnalysis stockCode="600000" />
Hook 使用
import { useDeepAnalysisData } from '@views/Company/components/DeepAnalysis/hooks';
const { data, loading, loadTabData, resetData } = useDeepAnalysisData(stockCode);
// 手动加载某个 Tab
loadTabData('valueChain');
// 重置所有数据
resetData();
性能优化
React.memo包装主组件useCallback稳定化事件处理函数useRef追踪已加载状态（避免重复请求）- 竞态条件检测（stockCode 变更时忽略旧请求）