如何封装列表页常见hook实现高效数据交互？

本文共计2181个文字，预计阅读时间需要9分钟。

目录 + 引用 + 列表页面常见元素 + usePagination + useAntdTable + 引用 + 文本是深入浅出 + ahooks + 源码系列文章，本系列的目的是：

+ 深入理解 React hooks+ 学习如何抽象自定义 hooks+ 构建高效的可复用组件

目录

• 引言
• 列表页常见元素
• usePagination
• useAntdTable

引言

本文是深入浅出 ahooks 源码系列文章，这个系列的目标主要有以下几点：

• 加深对 React hooks 的理解。
• 学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。
• 培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。

列表页常见元素

对于一些后台管理系统，典型的列表页包括筛选表单项、Table表格、Pagination分页这三部分。

针对使用 Antd 的系统，在 ahooks 中主要是通过 useAntdTable 和 usePagination 这两个 hook 来封装。

usePagination

usePagination 基于 useRequest 实现，封装了常见的分页逻辑。

首先通过 useRequest 处理请求，service 约定返回的数据结构为 { total: number, list: Item[] }。