用props实现列表分页需父组件管理currentpage和pagesize状态，通过slice计算当前页数据，并将状态与onpagechange等函数传给子组件；子组件只负责渲染和触发事件，不维护状态。
用 Props 实现列表分页，核心是把“当前页码”和“每页条数”作为受控状态由父组件管理，子组件只负责展示和触发翻页行为。这样逻辑清晰、可测试、易复用，也方便后续集成搜索、排序等能力。
父组件维护分页状态 + 数据源
父组件需要持有两个关键状态：currentPage（当前页）和pageSize（每页数量），并基于它们计算当前要渲染的数据切片。数据源可以是本地数组，也可以是通过 API 获取的完整列表（适合中小数据量）或仅存元信息（如总条数 + 分页请求）。
- 用 useState 初始化
currentPage = 1，pageSize = 10 - 从接口获取数据后，存入 useState 的
listData和total（总条数） - 用
listData.slice((currentPage-1)*pageSize, currentPage*pageSize)计算当前页数据 - 把
currentPage、pageSize、total和onPageChange函数通过 Props 传给分页子组件
子组件接收 Props 并触发翻页
分页子组件不维护自身页码状态，只做两件事：渲染页码控件（如上一页/下一页、页码数字）、点击时调用父组件传来的 onPageChange(newPage)。
-
onPageChange是一个函数 Prop，接收目标页码（如 3 或 "next"），父组件在其中更新currentPage - 避免直接传
setCurrentPage，而是封装一层语义化逻辑，比如支持onPageChange('prev')或onPageChange(5) - 禁用状态靠父组件传来的
currentPage和total判断：currentPage === 1时禁用“上一页”，currentPage >= Math.ceil(total / pageSize)时禁用“下一页”
支持手动跳转与尺寸切换（进阶但实用）
真实业务中常需输入页码跳转，或让用户选每页显示 10/20/50 条。这些仍由父组件控制，只需多传几个函数 Prop：
-
onPageSizeChange(newSize)：更新pageSize后重置currentPage = 1（避免跳到空页） -
onJumpToPage(pageNum)：校验输入是否合法（≥1 且 ≤ 最大页数），再更新currentPage - 子组件内用 input[type="number"] 或下拉选择器触发对应函数，不自行 setState
注意边界与性能细节
看似简单，但几个细节不处理好会出问题：
- 当
total变化（如筛选后），父组件应自动重置currentPage = 1，否则可能显示空页 - 如果数据量大，别一次性拉全量；改用“按需请求”模式：父组件传
currentPage和pageSize给 API，子组件只管触发，数据由父组件 fetch 后更新listData - 防抖页码输入框（尤其跳转时），避免频繁无效请求
- 服务端分页场景下，
total应来自接口响应头或 data 字段，而非前端计算
