父组件用 useState 管理 sortBy 和 sortDir 状态，子组件通过 Props 接收并响应 onSort，纯函数式排序 displayData；数据处理链为过滤→排序→分页，子组件仅渲染最终数据。
用 Props 实现表格列排序，关键不是让子组件自己记着“现在按哪列排、是升序还是降序”，而是把排序控制权交给父组件——子组件只管渲染和响应点击，所有状态和逻辑都由上层统一调度。
父组件管理排序状态
在父组件中用 useState 维护两个核心值：
-
sortBy：当前排序字段名（如
'name'、'createdAt'） -
sortDir：当前排序方向（
'asc'或'desc'）
初始化可设为 { sortBy: '', sortDir: 'asc' }，表示初始未排序。每次点击表头时，父组件更新这两个值，并触发重新计算展示数据。
子组件接收并响应排序指令
表格子组件通过 Props 接收 sortBy、sortDir 和 onSort 函数：
- 表头单元格绑定
onClick={() => onSort('email')} - 内部不保存排序状态，仅根据传入的
sortBy和sortDir对displayData做一次纯函数式排序（例如用Array.prototype.sort()） - 支持点击切换方向：若当前已是
'email'且sortDir === 'asc'，再次点击就改为'desc'
排序逻辑放在父组件或自定义 Hook 中
真实数据处理顺序通常是：先过滤 → 再排序 → 最后分页。这个链条必须在父组件（或 useTableState 这类自定义 Hook）里完成：
- 原始数据（
rawData）先被filters筛一遍 - 结果再按
sortBy/sortDir排序 - 最后用
slice((page-1)*size, page*size)截出当前页 - 子组件只接收最终要显示的
displayData和total，完全无副作用
让排序更实用的小技巧
提升可用性不靠加功能，而靠减少意外：
- 给
onSort加 TypeScript 类型或 PropTypes，避免传错字段名 -
filterText等字符串 Prop 设默认值filterText = ''，防止undefined导致过滤异常 - 多列排序？父组件维护一个数组（如
sortRules = [{key:'status',dir:'desc'}, {key:'updatedAt',dir:'asc'}]），再透传过去，子组件用它做稳定排序 - 重置排序只需清空
sortBy，子组件自动回退到原始顺序——不用暴露方法，也不用手动调用 ref
