perf(PledgePanel): 添加 useMemo 缓存图表配置

- 使用 useMemo 缓存 getPledgeDarkGoldOption 计算结果
- 避免每次渲染重新计算图表配置

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-19 14:23:47 +08:00
parent 94854fee3e
commit 22062a6556

View File

@@ -1,7 +1,7 @@
// src/views/Company/components/MarketDataView/components/panels/PledgePanel.tsx
// 股权质押面板 - 黑金主题
import React, { memo } from 'react';
import React, { memo, useMemo } from 'react';
import {
Box,
Text,
@@ -28,6 +28,12 @@ export interface PledgePanelProps {
}
const PledgePanel: React.FC<PledgePanelProps> = ({ pledgeData }) => {
// 缓存图表配置
const chartOption = useMemo(() => {
if (pledgeData.length === 0) return {};
return getPledgeDarkGoldOption(pledgeData);
}, [pledgeData]);
return (
<VStack spacing={6} align="stretch">
{/* 图表卡片 */}
@@ -35,7 +41,7 @@ const PledgePanel: React.FC<PledgePanelProps> = ({ pledgeData }) => {
{pledgeData.length > 0 && (
<Box h="400px">
<ECharts
option={getPledgeDarkGoldOption(pledgeData)}
option={chartOption}
style={{ height: '100%', width: '100%' }}
theme="dark"
/>