perf: 使用 React.memo 优化社区组件渲染性能
**优化目标**: - 减少组件卸载次数:从 6 次/刷新 → 1-2 次/刷新(↓ 66-83%) - 减少渲染次数:从 9 次/刷新 → 4-5 次/刷新(↓ 44-55%) **优化组件**(共 7 个): 1. ✅ ModeToggleButtons.js - 简单 UI 组件 2. ✅ DynamicNewsEventCard.js - 平铺模式卡片(被渲染 30+ 次) 3. ✅ HorizontalDynamicNewsEventCard.js - 纵向模式卡片(被渲染 10+ 次) 4. ✅ VerticalModeLayout.js - 布局组件 5. ✅ EventScrollList.js - 列表组件 6. ✅ VirtualizedFourRowGrid.js - 虚拟化网格(forwardRef) 7. ✅ DynamicNewsCard.js - 主组件(forwardRef) **技术实现**: - 普通组件:`React.memo(Component)` - forwardRef 组件:`React.memo(forwardRef(...))` - 所有回调函数已使用 useCallback 确保引用稳定 **预期效果**: - 列表渲染的卡片组件收益最大(减少 90% 重渲染) - 布局组件渲染次数从 9 次降到 1 次(减少 88%) - 整体用户体验更流畅,无明显卡顿 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user