标准答案
- 业务 Hook 通常用于复用有状态逻辑，例如分页、筛选、请求、权限、表单步骤、订阅或浏览器事件。
- 它应该以 use 开头，并遵守 Hooks 调用规则，只在组件或其他 Hook 顶层调用。
- 输入参数要清楚，返回值要稳定表达状态、动作和错误，例如 data、loading、error、refresh。
- Hook 内部有请求、事件监听、定时器或订阅时，要在 effect cleanup 中清理。
- 不要把整个页面流程封成一个巨大的 usePage，复用边界应该按状态所有权和副作用职责拆分。
题目解析
这道题不是问如何抽函数，而是问如何复用 React 状态和副作用逻辑。
好的 Hook 调用方能看懂它依赖什么、返回什么、什么时候触发副作用。
如果逻辑只是纯计算，不需要 state、effect 或其他 Hook，就不一定要封装成 Hook。
代码示例
下面的 usePagination 只处理分页状态，边界比较明确。
TSX
function usePagination(initialPageSize = 20) {
const [page, setPage] = useState(1)
const [pageSize, setPageSize] = useState(initialPageSize)
const resetPage = useCallback(() => {
setPage(1)
}, [])
return {
page,
pageSize,
setPage,
setPageSize,
resetPage
}
}常见误区
- 把页面所有请求、弹窗、表格、表单逻辑都放进一个巨大 Hook。
- Hook 内注册事件监听或定时器，但没有 cleanup。
- 返回值结构随意变化，调用方每次都要理解内部实现。