用 props 控制列表分页状态，即由父组件管理 currentpage、pagesize、total、loading 及 onpagechange，子组件仅反射状态并触发回调，实现逻辑与 ui 解耦、便于测试复用及统一控制。
用 Props 控制列表分页状态，核心是把“当前页码、总条数、每页数量、是否加载中”等状态从组件内部移出，交由父组件管理。子组件只负责接收和展示，不维护分页逻辑 —— 这样更易测试、复用，也方便统一控制（比如多列表同步翻页、权限拦截跳页）。
明确需要提升的分页状态字段
不是所有状态都要通过 Props 传入，关键看是否需跨组件协调或受外部影响。通常以下几项应由父组件提供：
- currentPage：当前页码（必传，受控）
- pageSize：每页数量（可选默认值，但建议传入以保持一致性）
- total：总数据条数（用于计算总页数、判断禁用下一页）
- loading：是否处于请求中（影响按钮禁用态和骨架屏）
- onPageChange：页码变更回调（子组件点击页码/上一页/下一页时触发）
子组件只做“状态反射”，不存本地 state
子组件内部不再使用 useState 管理 currentPage 或 loading。它只是把接收到的 Props 渲染成 UI，并在用户交互时调用 onPageChange 通知父组件：
- 点击页码数字 → 调用
onPageChange(newPage) - 点击“上一页” →
onPageChange(Math.max(1, currentPage - 1)) - 点击“下一页” →
onPageChange(Math.min(totalPages, currentPage + 1)) - 禁用逻辑（如首页不可点、无更多数据时“下一页”灰掉）全部基于传入的
currentPage和total计算
父组件集中管理分页生命周期
分页的副作用（如请求接口、节流翻页、错误重试）全在父组件处理。例如：
- 监听
currentPage变化，触发fetchData({ page: currentPage, size: pageSize }) - 在请求开始前设
loading = true，成功后更新data和total，失败则提示并保持当前页 - 支持 URL 同步：用
useEffect把currentPage写入 query，或从 URL 初始化currentPage - 若需“跳转到指定页”，父组件提供
goToPage方法，子组件通过onPageChange间接调用
配合自定义 Hook 封装复用逻辑
当多个列表共用分页行为时，可抽一个 usePagination Hook，返回 { currentPage, total, pageSize, loading, setPage }，并在父组件中调用：
- Hook 内部封装请求、防抖、错误处理
- 父组件将 Hook 返回值作为 Props 透传给子组件
- 子组件保持纯粹展示层，不感知数据来源（API / Mock / LocalStorage）
这样既解耦了 UI 和逻辑，又避免重复写分页胶水代码。
