refactor: 优化事件处理器和防抖逻辑

- 更新所有 handler 函数使用 updateFilters 替代 updateUrlParams
  - handleFilterChange
  - handlePageChange(移除 loadEvents 调用,由 useEffect 自动触发)
  - handleKeywordClick
  - handleRemoveFilterTag(移除 loadEvents 调用)

- 重构 useEffect:监听 filters 状态替代 searchParams
- 分离 Redux 数据加载到独立的 useEffect
- 保持防抖逻辑(500ms)
- 简化 useEffect 注释

适配新的状态管理模式,提升性能

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-10-26 14:46:17 +08:00
parent 8db9a9429e
commit 9eb13206cc

View File

@@ -171,13 +171,12 @@ const Community = () => {
// 处理筛选变化 // 处理筛选变化
const handleFilterChange = useCallback((filterType, value) => { const handleFilterChange = useCallback((filterType, value) => {
updateUrlParams({ [filterType]: value, page: 1 }); updateFilters({ [filterType]: value, page: 1 });
}, [updateUrlParams]); }, [updateFilters]);
// 处理分页变化 // 处理分页变化
const handlePageChange = useCallback((page) => { const handlePageChange = useCallback((page) => {
updateUrlParams({ page }); updateFilters({ page });
loadEvents(page);
// 滚动到实时事件时间轴(平滑滚动) // 滚动到实时事件时间轴(平滑滚动)
setTimeout(() => { setTimeout(() => {
@@ -188,7 +187,7 @@ const Community = () => {
}); });
} }
}, 100); // 延迟100ms确保DOM更新 }, 100); // 延迟100ms确保DOM更新
}, [updateUrlParams, loadEvents]); }, [updateFilters]);
// 处理事件点击 // 处理事件点击
const handleEventClick = useCallback((event) => { const handleEventClick = useCallback((event) => {
@@ -203,8 +202,8 @@ const Community = () => {
// 处理关键词点击 // 处理关键词点击
const handleKeywordClick = useCallback((keyword) => { const handleKeywordClick = useCallback((keyword) => {
updateUrlParams({ q: keyword, page: 1 }); updateFilters({ q: keyword, page: 1 });
}, [updateUrlParams]); }, [updateFilters]);
@@ -213,8 +212,7 @@ const Community = () => {
let reset = ''; let reset = '';
if (key === 'sort') reset = 'new'; if (key === 'sort') reset = 'new';
if (key === 'importance') reset = 'all'; if (key === 'importance') reset = 'all';
updateUrlParams({ [key]: reset, page: 1 }); updateFilters({ [key]: reset, page: 1 });
loadEvents(1);
}; };
// 获取筛选标签 // 获取筛选标签
@@ -240,31 +238,26 @@ const Community = () => {
}, 500) }, 500)
).current; ).current;
// 初始化加载 // 加载事件列表 - 监听 filters 状态变化
// 注意: 只监听 searchParams 变化,不监听 loadEvents 等函数
// 这是为了避免 StockDetailPanel 打开时触发不必要的重新加载
// 防抖优化:用户快速切换筛选条件时,只执行最后一次请求 // 防抖优化:用户快速切换筛选条件时,只执行最后一次请求
useEffect(() => { useEffect(() => {
logger.debug('Community', 'useEffect 触发,searchParams 变化', { logger.debug('Community', 'useEffect 触发,filters 变化', { filters });
params: searchParams.toString()
});
const page = parseInt(searchParams.get('page') || '1', 10);
// 使用防抖加载事件 // 使用防抖加载事件
debouncedLoadEvents(page); debouncedLoadEvents(filters.page);
// 热门关键词和热点事件不需要防抖初次加载使用Redux
if (searchParams.get('page') === null || searchParams.get('page') === '1') {
dispatch(fetchPopularKeywords());
dispatch(fetchHotEvents());
}
// 组件卸载时取消防抖 // 组件卸载时取消防抖
return () => { return () => {
debouncedLoadEvents.cancel(); debouncedLoadEvents.cancel();
}; };
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchParams]); // 监听 URL 参数变化 }, [filters]); // 监听本地 filters 状态变化
// 加载热门关键词和热点事件使用Redux内部有缓存判断
useEffect(() => {
dispatch(fetchPopularKeywords());
dispatch(fetchHotEvents());
}, [dispatch]);
// ⚡ 首次访问社区时,延迟显示权限引导 // ⚡ 首次访问社区时,延迟显示权限引导
useEffect(() => { useEffect(() => {