diff --git a/src/views/Community/components/DynamicNewsCard/PaginationControl.js b/src/views/Community/components/DynamicNewsCard/PaginationControl.js index 5b619029..19fb11e3 100644 --- a/src/views/Community/components/DynamicNewsCard/PaginationControl.js +++ b/src/views/Community/components/DynamicNewsCard/PaginationControl.js @@ -18,12 +18,12 @@ import { } from '@chakra-ui/icons'; /** - * 分页控制器组件 + * 分页控制器组件(使用 React.memo 优化,避免不必要的重新渲染) * @param {number} currentPage - 当前页码 * @param {number} totalPages - 总页数 * @param {Function} onPageChange - 页码改变回调 */ -const PaginationControl = ({ currentPage, totalPages, onPageChange }) => { +const PaginationControl = React.memo(({ currentPage, totalPages, onPageChange }) => { const [jumpPage, setJumpPage] = useState(''); const toast = useToast(); @@ -206,6 +206,10 @@ const PaginationControl = ({ currentPage, totalPages, onPageChange }) => { ); -}; +}, (prevProps, nextProps) => { + // 自定义比较函数:只有当 currentPage 或 totalPages 变化时才重新渲染 + return prevProps.currentPage === nextProps.currentPage && + prevProps.totalPages === nextProps.totalPages; +}); export default PaginationControl; diff --git a/src/views/Community/components/DynamicNewsCard/constants.js b/src/views/Community/components/DynamicNewsCard/constants.js index 5aad3ab3..d9ef9538 100644 --- a/src/views/Community/components/DynamicNewsCard/constants.js +++ b/src/views/Community/components/DynamicNewsCard/constants.js @@ -3,19 +3,14 @@ // ========== 分页配置常量 ========== export const PAGINATION_CONFIG = { - CAROUSEL_PAGE_SIZE: 5, // 单排模式每页数量 - GRID_PAGE_SIZE: 10, // 双排模式每页数量 - FOUR_ROW_PAGE_SIZE: 20, // 四排模式每页数量 + FOUR_ROW_PAGE_SIZE: 20, // 平铺模式每页数量 VERTICAL_PAGE_SIZE: 10, // 纵向模式每页数量 INITIAL_PAGE: 1, // 初始页码 - PRELOAD_RANGE: 2, // 预加载范围(前后各N页) }; // ========== 显示模式常量 ========== export const DISPLAY_MODES = { - CAROUSEL: 'carousel', // 单排轮播模式 - GRID: 'grid', // 双排网格模式 - FOUR_ROW: 'four-row', // 四排网格模式 + FOUR_ROW: 'four-row', // 平铺网格模式 VERTICAL: 'vertical', // 纵向分栏模式 };