vf_react

前端

---

📚 重构记录

2025-10-30: EventList.js 组件化重构

🎯 重构目标

将 Community 社区页面的 EventList.js 组件（1095行）拆分为多个可复用的子组件，提高代码可维护性和复用性。

📊 重构成果

• 重构前: 1095 行
• 重构后: 497 行
• 减少: 598 行 (-54.6%)

---

📁 新增目录结构

src/views/Community/components/EventCard/
├── index.js                      (60行)  - EventCard 统一入口，智能路由紧凑/详细模式
│
├── ──────────────────────────────────────────────────────────
│   原子组件 (Atoms) - 7个基础UI组件
├── ──────────────────────────────────────────────────────────
│
├── EventTimeline.js              (60行)  - 时间轴显示组件
│   └── Props: createdAt, timelineStyle, borderColor, minHeight
│
├── EventImportanceBadge.js       (100行) - 重要性等级标签 (S/A/B/C/D)
│   └── Props: importance, showTooltip, showIcon, size
│
├── EventStats.js                 (60行)  - 统计信息 (浏览/帖子/关注)
│   └── Props: viewCount, postCount, followerCount, size, spacing
│
├── EventFollowButton.js          (40行)  - 关注按钮
│   └── Props: isFollowing, followerCount, onToggle, size, showCount
│
├── EventPriceDisplay.js          (130行) - 价格变动显示 (平均/最大/周)
│   └── Props: avgChange, maxChange, weekChange, compact, inline
│
├── EventDescription.js           (60行)  - 描述文本 (支持展开/收起)
│   └── Props: description, textColor, minLength, noOfLines
│
├── EventHeader.js                (100行) - 事件标题头部
│   └── Props: title, importance, onTitleClick, linkColor, compact
│
├── ──────────────────────────────────────────────────────────
│   组合组件 (Molecules) - 2个卡片组件
├── ──────────────────────────────────────────────────────────
│
├── CompactEventCard.js           (160行) - 紧凑模式事件卡片
│   ├── 使用: EventTimeline, EventHeader, EventStats, EventFollowButton
│   └── Props: event, index, isFollowing, followerCount, callbacks...
│
└── DetailedEventCard.js          (170行) - 详细模式事件卡片
    ├── 使用: EventTimeline, EventHeader, EventStats, EventFollowButton,
    │        EventPriceDisplay, EventDescription
    └── Props: event, isFollowing, followerCount, callbacks...

总计: 10个文件，940行代码

---

🔧 重构的文件

src/views/Community/components/EventList.js

移除的内容:

• ❌ renderPriceChange 函数 (~60行)
• ❌ renderCompactEvent 函数 (~200行)
• ❌ renderDetailedEvent 函数 (~300行)
• ❌ expandedDescriptions state（展开状态管理移至子组件）
• ❌ 冗余的 Chakra UI 导入

保留的功能:

• ✅ WebSocket 实时推送
• ✅ 浏览器原生通知
• ✅ 关注状态管理 (followingMap, followCountMap)
• ✅ 分页控制
• ✅ 视图模式切换（紧凑/详细）
• ✅ 推送权限管理

新增引入:

import EventCard from './EventCard';

---

🏗️ 架构改进

重构前（单体架构）

EventList.js (1095行)
├── 业务逻辑 (WebSocket, 关注, 通知)
├── renderCompactEvent (200行)
│   └── 所有UI代码内联
├── renderDetailedEvent (300行)
│   └── 所有UI代码内联
└── renderPriceChange (60行)

重构后（组件化架构）

EventList.js (497行) - 容器组件
├── 业务逻辑 (WebSocket, 关注, 通知)
└── 渲染逻辑
    └── EventCard (智能路由)
        ├── CompactEventCard (紧凑模式)
        │   ├── EventTimeline
        │   ├── EventHeader (compact)
        │   ├── EventStats
        │   └── EventFollowButton
        └── DetailedEventCard (详细模式)
            ├── EventTimeline
            ├── EventHeader (detailed)
            ├── EventStats
            ├── EventFollowButton
            ├── EventPriceDisplay
            └── EventDescription

---

✨ 优势

1. 可维护性 ⬆️

   • 每个组件职责单一（单一职责原则）
   • 代码行数减少 54.6%
   • 组件边界清晰，易于理解

2. 可复用性 ⬆️

   • 原子组件可在其他页面复用
   • 例如：EventImportanceBadge 可用于任何需要显示事件等级的地方

3. 可测试性 ⬆️

   • 小组件更容易编写单元测试
   • 可独立测试每个组件的渲染和交互

4. 性能优化 ⬆️

   • React 可以更精确地追踪变化
   • 减少不必要的重渲染
   • 每个子组件可独立优化（useMemo, React.memo）

5. 开发效率 ⬆️

   • 新增功能时只需修改对应的子组件
   • 代码审查更高效
   • 降低了代码冲突的概率

---

📦 依赖工具函数

本次重构使用了之前提取的工具函数：

src/utils/priceFormatters.js          (105行)
├── getPriceChangeColor(value)        - 获取价格变化文字颜色
├── getPriceChangeBg(value)           - 获取价格变化背景颜色
├── getPriceChangeBorderColor(value)  - 获取价格变化边框颜色
├── formatPriceChange(value)          - 格式化价格为字符串
└── PriceArrow({ value })             - 价格涨跌箭头组件

src/constants/animations.js           (72行)
├── pulseAnimation                    - 脉冲动画（S/A级标签）
├── fadeIn                            - 渐入动画
├── slideInUp                         - 从下往上滑入
├── scaleIn                           - 缩放进入
└── spin                              - 旋转动画（Loading）

---

🚀 下一步优化计划

Phase 1 已完成，后续可继续优化：

• Phase 2: 拆分 StockDetailPanel.js (1067行 → ~250行)
• Phase 3: 拆分 InvestmentCalendar.js (827行 → ~200行)
• Phase 4: 拆分 MidjourneyHeroSection.js (813行 → ~200行)
• Phase 5: 拆分 UnifiedSearchBox.js (679行 → ~180行)

---

🔗 相关提交

• feat: 拆分 EventList.js/提取价格相关工具函数到 utils/priceFormatters.js
• feat(EventList): 创建事件卡片原子组件
• feat(EventList): 创建事件卡片组合组件
• refactor(EventList): 使用组件化架构替换内联渲染函数

---