usePagination Hook 使用说明

功能概述

usePagination 是一个强大的分页管理 Hook，专为表格分页场景设计，支持服务端分页、本地数据管理、防抖刷新等功能。

基础用法

const { tableProps, paginationProps } = usePagination(
    async ({ offset, limit }) => {
        const res = await fetch(`/api/data?offset=${offset}&limit=${limit}`);
        return {
            dataSource: res.data,
            total: res.total,
        };
    },
    [dependency], // 依赖项
);

核心 API

输入参数

参数	类型	必填	说明
server	(params: IServerParams) => Promise>	是	数据获取函数
deps	any[]	否	依赖项数组
option	IInfoOption	否	配置选项

配置选项 (IInfoOption)

interface IInfoOption<T> {
    isReady?: boolean; // 是否准备就绪
    dataSource?: T[]; // 初始数据
    current?: number; // 初始页码
    pageSize?: number; // 初始每页条数
}

服务端参数 (IServerParams)

interface IServerParams {
    offset: number; // 数据偏移量
    limit: number; // 每页条数
    current: number; // 当前页码
}

服务端返回值 (IInfoBack)

interface IInfoBack<T> {
    dataSource: T[]; // 数据列表
    total: number; // 总条数
}

返回值

属性	类型	说明
tableProps	{ loading, dataSource }	表格属性
paginationProps	IPaginationProps	分页器属性
refresh	(resetPage?: boolean) => Promise	刷新函数
debounceRefresh	(resetPage?: boolean) => void	防抖刷新
setDataSource	(data: T[]) => void	设置数据源
isFirstComplete	boolean	是否首次加载完成

完整示例

服务端分页表格

function UserTable() {
    const { tableProps, paginationProps } = usePagination(
        async ({ offset, limit }) => {
            const res = await getUserList({ offset, limit });
            return {
                dataSource: res.list,
                total: res.total,
            };
        },
        [],
        { pageSize: 20 },
    );

    return <Table columns={columns} {...tableProps} pagination={paginationProps} />;
}

带条件查询

const [query, setQuery] = useState('');
const { debounceRefresh } = usePagination(
    async ({ offset, limit }) => {
        const res = await searchUsers({ query, offset, limit });
        return {
            dataSource: res.list,
            total: res.total,
        };
    },
    [query], // 查询条件变化时自动刷新
);

高级功能

手动刷新

const { refresh } = usePagination(/*...*/);

// 普通刷新
const handleRefresh = () => refresh();

// 重置页码刷新
const handleReset = () => refresh(true);

防抖刷新

const { debounceRefresh } = usePagination(/*...*/);

// 输入搜索时防抖触发
const handleSearch = value => {
    setQuery(value);
    debounceRefresh(true);
};

本地数据修改

const { setDataSource } = usePagination(/*...*/);

const handleEdit = newData => {
    setDataSource(data => data.map(item => (item.id === newData.id ? newData : item)));
};