pref: 代码优化

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 }) => {
       </HStack>
     </Box>
   );
-};
+}, (prevProps, nextProps) => {
+  // 自定义比较函数：只有当 currentPage 或 totalPages 变化时才重新渲染
+  return prevProps.currentPage === nextProps.currentPage &&
+         prevProps.totalPages === nextProps.totalPages;
+});
 
 export default PaginationControl;

src/views/Community/components/DynamicNewsCard/constants.js

@@ -3,19 +3,14 @@
 
 // ========== 分页配置常量 ==========
 export const PAGINATION_CONFIG = {
-  CAROUSEL_PAGE_SIZE: 5,      // 单排模式每页数量
+  FOUR_ROW_PAGE_SIZE: 20,     // 平铺模式每页数量
-  GRID_PAGE_SIZE: 10,         // 双排模式每页数量
-  FOUR_ROW_PAGE_SIZE: 20,     // 四排模式每页数量
   VERTICAL_PAGE_SIZE: 10,     // 纵向模式每页数量
   INITIAL_PAGE: 1,            // 初始页码
-  PRELOAD_RANGE: 2,           // 预加载范围（前后各N页）
 };
 
 // ========== 显示模式常量 ==========
 export const DISPLAY_MODES = {
-  CAROUSEL: 'carousel',       // 单排轮播模式
+  FOUR_ROW: 'four-row',      // 平铺网格模式
-  GRID: 'grid',              // 双排网格模式
-  FOUR_ROW: 'four-row',      // 四排网格模式
   VERTICAL: 'vertical',      // 纵向分栏模式
 };