refactor: 前端性能优化 — 倒计时组件隔离、React memoization 链路
- 新建 RefreshCountdown 组件,内部持有 timer,消除 App 每秒重渲染 - TargetBoard 分组逻辑 useMemo 化,避免 targets 引用不变时重复计算 - TargetGroup 加 React.memo,阻断无效渲染 - TrendChart 加 React.memo + chartData useMemo,避免 recharts 不必要重绘 - OverviewTab 统计项去掉 Card 包裹,改用纯 CSS 实现视觉效果 - 同步更新 refresh-control 和 target-detail-drawer spec 性能提升:消除每秒全组件树重渲染,减少 DOM 节点数
This commit is contained in:
@@ -72,6 +72,36 @@ TrendChart 组件 SHALL 仅接收数据 props,不处理 loading 状态。
|
||||
- **WHEN** TrendChart 接收空数组
|
||||
- **THEN** 组件 SHALL 显示"暂无趋势数据"占位文本
|
||||
|
||||
#### Scenario: TrendChart memo 包裹
|
||||
- **WHEN** TrendChart 的父组件重渲染但 data prop 引用未变
|
||||
- **THEN** TrendChart SHALL 跳过重渲染(通过 React.memo shallow compare)
|
||||
|
||||
#### Scenario: chartData useMemo
|
||||
- **WHEN** TrendChart 渲染
|
||||
- **THEN** 内部 `chartData` 转换结果 SHALL 通过 `useMemo` 缓存,依赖为 `[data]`,data 引用不变时不重新计算
|
||||
|
||||
### Requirement: TargetBoard 分组 memoize
|
||||
TargetBoard 组件的分组计算 SHALL 使用 useMemo 缓存,避免 targets 引用不变时重复计算分组。
|
||||
|
||||
#### Scenario: 分组结果 useMemo
|
||||
- **WHEN** TargetBoard 渲染
|
||||
- **THEN** 分组逻辑(Map 构建 + sort)SHALL 通过 `useMemo` 缓存,依赖为 `[targets]`
|
||||
|
||||
#### Scenario: targets 引用不变时跳过分组
|
||||
- **WHEN** TargetBoard 因父组件重渲染而重渲染,但 targets prop 引用未变
|
||||
- **THEN** 分组计算 SHALL 返回缓存结果,不重新执行 Map 构建和排序
|
||||
|
||||
### Requirement: TargetGroup 渲染优化
|
||||
TargetGroup 组件 SHALL 使用 React.memo 包裹,在 props 引用不变时跳过重渲染。
|
||||
|
||||
#### Scenario: TargetGroup memo 包裹
|
||||
- **WHEN** TargetBoard 重渲染但某个分组的 targets 数组引用未变
|
||||
- **THEN** 对应的 TargetGroup SHALL 跳过重渲染(通过 React.memo shallow compare)
|
||||
|
||||
#### Scenario: TargetGroup props 稳定性
|
||||
- **WHEN** TargetGroup 渲染
|
||||
- **THEN** 其 props(columns、name、targets、onTargetClick)SHALL 全部具有引用稳定性:columns 通过 useMemo、name 为 string 原始值、targets 通过分组 useMemo、onTargetClick 通过 useCallback
|
||||
|
||||
### Requirement: StatusBar 参数化
|
||||
StatusBar 组件 SHALL 支持可配置的格数。
|
||||
|
||||
@@ -189,7 +219,7 @@ Drawer 内部 SHALL 使用 TDesign Tabs 组织概览和记录两个面板。Tabs
|
||||
|
||||
#### Scenario: 统计区左右布局卡片
|
||||
- **WHEN** 概览面板渲染且有统计数据
|
||||
- **THEN** 面板 SHALL 在"统计"区域使用 4 列 × 2 行的 Row/Col 布局,每个统计项使用 Card 包裹,Card 内标题左对齐、数值右对齐,数值使用普通文本字号
|
||||
- **THEN** 面板 SHALL 在"统计"区域使用 4 列 × 2 行的 Row/Col 布局,每个统计项使用 `<div className="overview-stat-card">` 包裹,通过 CSS 类实现背景色和内边距视觉效果
|
||||
|
||||
#### Scenario: 统计区内容
|
||||
- **WHEN** 概览面板渲染
|
||||
|
||||
Reference in New Issue
Block a user