diff --git a/src/views/Community/components/DynamicNewsCard.js b/src/views/Community/components/DynamicNewsCard.js index 524b3575..f0eba5ce 100644 --- a/src/views/Community/components/DynamicNewsCard.js +++ b/src/views/Community/components/DynamicNewsCard.js @@ -63,7 +63,7 @@ let dynamicNewsCardRenderCount = 0; * @param {Object} trackingFunctions - PostHog 追踪函数集合 * @param {Object} ref - 用于滚动的ref */ -const DynamicNewsCard = forwardRef(({ +const DynamicNewsCardComponent = forwardRef(({ filters = {}, popularKeywords = [], lastUpdateTime, @@ -722,6 +722,9 @@ const [currentMode, setCurrentMode] = useState('vertical'); ); }); -DynamicNewsCard.displayName = 'DynamicNewsCard'; +DynamicNewsCardComponent.displayName = 'DynamicNewsCard'; + +// ⚡ 使用 React.memo 优化性能(减少不必要的重渲染) +const DynamicNewsCard = React.memo(DynamicNewsCardComponent); export default DynamicNewsCard; diff --git a/src/views/Community/components/DynamicNewsCard/EventScrollList.js b/src/views/Community/components/DynamicNewsCard/EventScrollList.js index 2243d0f0..f216b187 100644 --- a/src/views/Community/components/DynamicNewsCard/EventScrollList.js +++ b/src/views/Community/components/DynamicNewsCard/EventScrollList.js @@ -30,7 +30,7 @@ import VerticalModeLayout from './VerticalModeLayout'; * @param {Function} onToggleFollow - 关注按钮回调 * @param {React.Ref} virtualizedGridRef - VirtualizedFourRowGrid 的 ref(用于获取滚动位置) */ -const EventScrollList = ({ +const EventScrollList = React.memo(({ events, displayEvents, loadNextPage, @@ -144,6 +144,6 @@ const EventScrollList = ({ /> ); -}; +}); export default EventScrollList; diff --git a/src/views/Community/components/DynamicNewsCard/ModeToggleButtons.js b/src/views/Community/components/DynamicNewsCard/ModeToggleButtons.js index 813f1d23..c6c46d31 100644 --- a/src/views/Community/components/DynamicNewsCard/ModeToggleButtons.js +++ b/src/views/Community/components/DynamicNewsCard/ModeToggleButtons.js @@ -9,7 +9,7 @@ import { Button, ButtonGroup } from '@chakra-ui/react'; * @param {string} mode - 当前模式 'vertical' | 'four-row' * @param {Function} onModeChange - 模式切换回调 */ -const ModeToggleButtons = ({ mode, onModeChange }) => { +const ModeToggleButtons = React.memo(({ mode, onModeChange }) => { return ( ); -}; +}); export default ModeToggleButtons; diff --git a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js index 6b588868..3101718d 100644 --- a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js +++ b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js @@ -35,7 +35,7 @@ import DynamicNewsDetailPanel from '../DynamicNewsDetail/DynamicNewsDetailPanel' * @param {Function} getTimelineBoxStyle - 时间线样式获取函数 * @param {string} borderColor - 边框颜色 */ -const VerticalModeLayout = ({ +const VerticalModeLayout = React.memo(({ display = 'flex', events, selectedEvent, @@ -182,6 +182,6 @@ const VerticalModeLayout = ({ )} ); -}; +}); export default VerticalModeLayout; diff --git a/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js b/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js index 49c4b329..38602c37 100644 --- a/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js +++ b/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js @@ -25,7 +25,7 @@ import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard'; * @param {boolean} props.hasMore - 是否还有更多数据 * @param {boolean} props.loading - 加载状态 */ -const VirtualizedFourRowGrid = forwardRef(({ +const VirtualizedFourRowGridComponent = forwardRef(({ display = 'block', events, columnsPerRow = 4, @@ -387,6 +387,9 @@ const VirtualizedFourRowGrid = forwardRef(({ ); }); -VirtualizedFourRowGrid.displayName = 'VirtualizedFourRowGrid'; +VirtualizedFourRowGridComponent.displayName = 'VirtualizedFourRowGrid'; + +// ⚡ 使用 React.memo 优化性能(减少不必要的重渲染) +const VirtualizedFourRowGrid = React.memo(VirtualizedFourRowGridComponent); export default VirtualizedFourRowGrid; diff --git a/src/views/Community/components/EventCard/DynamicNewsEventCard.js b/src/views/Community/components/EventCard/DynamicNewsEventCard.js index cfc31d3a..a96a2da8 100644 --- a/src/views/Community/components/EventCard/DynamicNewsEventCard.js +++ b/src/views/Community/components/EventCard/DynamicNewsEventCard.js @@ -33,7 +33,7 @@ import StockChangeIndicators from '../../../../components/StockChangeIndicators' * @param {Function} props.onToggleFollow - 切换关注事件 * @param {string} props.borderColor - 边框颜色 */ -const DynamicNewsEventCard = ({ +const DynamicNewsEventCard = React.memo(({ event, index, isFollowing, @@ -317,6 +317,6 @@ const DynamicNewsEventCard = ({ ); -}; +}); export default DynamicNewsEventCard; diff --git a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js index 344260d0..7a552c91 100644 --- a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js +++ b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js @@ -39,7 +39,7 @@ import KeywordsCarousel from './KeywordsCarousel'; * @param {string} props.indicatorSize - 涨幅指标尺寸 ('default' | 'comfortable' | 'large') * @param {string} props.layout - 布局模式 ('vertical' | 'four-row'),影响时间轴竖线高度 */ -const HorizontalDynamicNewsEventCard = ({ +const HorizontalDynamicNewsEventCard = React.memo(({ event, index, isFollowing, @@ -227,6 +227,6 @@ const HorizontalDynamicNewsEventCard = ({ ); -}; +}); export default HorizontalDynamicNewsEventCard;