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