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:
@@ -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(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user