DEV Community
·
如何创建和测试用于全局加载指示器的 React Query 钩子
💡
原文英文，约900词，阅读约需4分钟。
📝
内容提要
本文讲解如何用 React Query 创建自定义钩子 `useServiceConfig`，通过 `useIsFetching`、`useIsMutating` 和 `useIsRestoring` 判断服务调用状态，以管理全局加载状态。使用 Jest 进行单元测试，模拟不同状态验证钩子功能，帮助应用显示加载指示器，并可扩展钩子功能。
🎯
关键要点
- React Query 是处理 React 应用中数据获取、缓存和同步的强大工具。
- 创建自定义钩子 useServiceConfig，用于判断服务调用状态以管理全局加载状态。
- 使用 useIsFetching、useIsMutating 和 useIsRestoring 函数来检查服务调用是否待处理。
- 使用 useMemo 组合这些状态，返回一个布尔值表示是否有服务调用待处理。
- 使用 Jest 进行单元测试，确保钩子按预期工作。
- 测试用例包括默认模式、特定模式（fetching、mutating、restoring）下的状态验证。
- 运行测试以确保所有测试通过，验证钩子的功能。
- 可以扩展钩子以接受其他参数，进一步自定义其行为。
- 探索更多 React Query 的工具，以提升应用性能和用户体验。
❓
延伸问答
如何使用 React Query 创建自定义钩子？
可以通过创建一个名为 useServiceConfig 的自定义钩子，结合 useIsFetching、useIsMutating 和 useIsRestoring 函数来判断服务调用状态。
useServiceConfig 钩子如何判断服务调用状态？
useServiceConfig 钩子使用 useIsFetching、useIsMutating 和 useIsRestoring 函数的返回值，通过 useMemo 组合这些状态，返回一个布尔值表示是否有服务调用待处理。
如何使用 Jest 测试自定义钩子？
可以使用 Jest 和 React Testing Library 的 renderHook 工具来测试钩子，模拟不同的状态并验证钩子的返回值是否符合预期。
useServiceConfig 钩子支持哪些模式？
useServiceConfig 钩子支持四种模式：fetching、mutating、restoring 和 all，用户可以根据需要选择检查特定的服务调用状态。
如何扩展 useServiceConfig 钩子的功能？
可以扩展 useServiceConfig 钩子以接受其他参数，例如特定的查询键，从而进一步自定义其行为。
React Query 的主要功能是什么？
React Query 是一个强大的工具，用于处理 React 应用中的数据获取、缓存和同步。
➡️
