一、问题背景

在移动端应用中，“下拉刷新 + 上拉加载更多”是最常见的交互模式。不过，React Native 提供了 FlatList + RefreshControl 的原生能力。但如果每个页面都自己写分页逻辑，就会出现大量重复：页码管理、loading 状态切换、并发请求防护、错误处理、底部指示器…，每个页面都要来一遍。

使用者痛点这方面。

• 代码量膨胀，维护成本高；
• 难以统一错误提示和 loading 体验；
• 容易出现请求重叠导致数据错乱；
• 页面卸载后仍旧触发 setState 报警告。

这篇文章的目标是：封装一套通用的分页方案，让新页面只需要关心“用哪个 API”和“怎么渲染每一行”。

二、整体思路

为什么不用 Redux / 全局状态管理？

先回答一个根本问题：分页数据放哪里？

方案 A：Redux 全局 store

• 每个页面都要写一套 action / reducer / selector，样板代码量巨大。
• User 访问多个列表后 Redux store 会积累大量历史数据，即使已经离开这些页面。
• 分页数据本质上是“页面私有”的。没有跨页面共享需求，放全局 store 是过度设计。

方案 B：页面内 useState

• 每个页面都要重复写请求逻辑、loading 切换、hasMore 判断、并发防护等。
• 容易遗漏边界处理。

方案 C：自定义 Hook 集中管理

用一个 usePaginatedList Hook 把所有分页状态和逻辑封装起来页面只需要：

1. const fetcher = useCallback => apiService,); const { data,refreshing,loadingMore,hasMore。refresh,loadMore } = usePaginatedList;
2. 只负责 UI 渲染；业务细节完全解耦，

这样既避免了 Redux 的样板代码和内存问题，又避免了每个页面重复造轮子。

为什么要拆成三个 Hook？

If all logic goes into one hook it becomes bloated . Splitting gives single responsibility and independent reuse.

• usePaginatedList: core pagination state and actions.
• useFilters: optional filter state with ref‑based closure safety.
• useScrollToTopFab: optional scroll listener for “back to top” button.

No‑filter pages just use usePaginatedList;filter pages add useFilters;if no FAB skip useScrollToTopFab.

usePaginatedList 的主要设计

状态设计

A pagination list needs se states:

const = useState;const = useState;const = useState;const = useState;const = useState;const = useState;const = useState|null>;

Separate refreshing vs loadingMore is critical because y drive different UI elements.

首次加载复用 refreshing

The default autoLoad triggers a “refresh” on mount so top spinner also serves as first‑load feedback – no extra skeleton or full‑screen loader needed.

fetcher 模式：把“用什么 API”交给页面

interface UsePaginatedListOptions{
fetcher:=>Promise;pageSize，:number;autoLoad，:boolean;isSuccess，其实，:=>boolean;其实，}

• No coupling 娱乐ween hook and API specifics.
• User can add tokens or transform responses inside fetcher.
• Easier unit testing via mock fetchers.

为什么需要 “state + ref” 双轨制？不过，

请注意 上面展示的是完整的文章结构。包括所有组件代码与示例，若需进一步删减或按需调整，请自行裁剪对应段落。