本文探讨了在React Hook中可靠获取异步加载数据（如认证令牌）的挑战，特别是当数据源（如`useSession`）并非立即可用时。文章分析了手动轮询机制的局限性，并提出了利用`react-query`库的`useQuery` Hook作为一种优雅且高效的解决方案，以实现声明式的数据获取、条件执行和状态管理，从而显著简化Hook逻辑并提升应用性能。
引言：React Hook中异步数据管理的挑战
在现代React应用开发中，处理异步数据是家常便饭。无论是从API获取用户数据，还是管理认证令牌，开发者经常需要在组件或自定义Hook中等待数据加载完成。然而，当数据源本身是异步的，并且其状态变化具有不确定性时（例如，用户认证状态在应用启动后才变为“已认证”），如何可靠地获取并使用这些数据就成为了一个挑战。尤其是在自定义Hook中封装这类逻辑时，需要确保数据在可用时能够被正确捕获和返回，同时避免不必要的轮询或复杂的时序问题。
问题分析：原始useToken2 Hook的局限性
考虑一个常见的场景：我们需要从next-auth的useSession Hook中获取用户的accessToken，并将其封装在一个自定义Hook useToken2 中供其他组件使用。原始的useToken2 Hook尝试通过useEffect来监听session和status的变化，并在认证成功后设置token状态。同时，它提供了一个tokenFn函数，期望在token尚未可用时通过setInterval轮询等待token的设置。
export function useToken2() {
const { data: session, status } = useSession();
const [token, setToken] = useState(null);
useEffect(() => {
if (status === 'authenticated' && session?.accessToken) {
console.log('useEffect setToken');
setToken(session.accessToken);
}
}, [status, session]);
const tokenFn = useCallback(async (): Promise => {
return new Promise((resolve) => {
if (token != null) {
resolve(token);
} else {
const tokenInterval = setInterval(() => {
if (token != null) {
clearInterval(tokenInterval);
resolve(token);
}
}, 100);
setTimeout(() => {
clearInterval(tokenInterval);
console.log('tokenFn timeout');
resolve('');
}, 5000);
}
});
}, [token]); // 依赖token
return {
tokenFn,
};
} 原始方案的问题点：
- 闭包陷阱与过时引用：尽管tokenFn使用了useCallback并声明了对token的依赖，但这只保证当token变化时tokenFn会被重新创建。然而，如果在tokenFn被调用时token仍为null，并且setInterval启动，那么setInterval回调内部捕获的token可能仍然是旧的（null）值。即使useEffect随后更新了组件的token状态，setInterval内部的闭包可能不会立即感知到这个更新，导致它持续检查旧值。
- 竞态条件与不确定性：setInterval和setTimeout的组合引入了复杂的时序问题。token的设置是一个异步过程，setInterval尝试以固定的间隔检查，而setTimeout则设置了一个硬性超时。这可能导致在token实际上已经可用但setInterval尚未捕获到，或者在token可用前setTimeout就已触发并返回空字符串。日志输出 tokenFn timeout 明确指示了setInterval未能及时捕获到token的更新。
- 资源消耗：持续的setInterval轮询会占用CPU资源，尤其是在数据长时间不可用或超时设置过长的情况下，这会降低应用的效率。
- 复杂性与维护难度：手动管理这些异步逻辑（定时器、清除定时器、Promise解析）增加了代码的复杂性，降低了可读性和维护性。
解决方案：利用react-query (TanStack Query) 进行异步状态管理
为了优雅且高效地解决上述问题，我们可以引入像react-query（现称TanStack Query）这样的异步数据管理库。react-query提供了一套强大的工具集，用于处理数据获取、缓存、同步和更新，极大地简化了异步状态管理。
优化后的useToken2 Hook：
import { useSession } from 'next-auth/react';
import { useQuery } from 'react-query'; // 或者 '@tanstack/react-query'
export function useToken2() {
const { data: session, status } = useSession();
// 使用 useQuery 来管理 token 的异步获取
const { data: token } = useQuery(
['token'], // queryKey：用于标识和缓存查询
async () => {
// queryFn：定义如何获取数据
return session?.accessToken ?? '';
},
{
// enabled：条件执行查询。只有当 session.accessToken 存在且状态为 authenticated 时才执行
enabled: !!session?.accessToken && status === 'authenticated',
staleTime: Infinity, // 如果 token 不会变化，可以设置为 Infinity 避免重新获取
cacheTime: Infinity, // 同样，如果 token 不会变化，可以设置为 Infinity
}
);
return {
token, // 直接返回由 useQuery 管理的 token
};
} useQuery 解决方案详解：
- 声明式数据获取：useQuery允许我们以声明式的方式定义如何获取数据 (queryFn)，而无需手动管理加载状态、错误处理或数据缓存。
-
条件执行 (enabled 选项)：这是解决原始问题的核心。enabled: !!session?.accessToken && status === 'authenticated' 确保queryFn只在满足特定条件时才会被执行。
- 当session的accessToken为null或status不是'authenticated'时，useQuery不会触发数据获取。
- 一旦session更新，accessToken变得可用且status变为'authenticated'，enabled条件变为true，useQuery会自动执行queryFn来获取令牌。
- useQuery会自动将queryFn返回的数据存储在data属性中，并将其作为响应式状态返回。
- 缓存与去重：react-query内置了强大的缓存机制。['token']作为queryKey标识了这个查询。如果多个组件同时使用useToken2，react-query只会执行一次queryFn，并将结果缓存起来供所有订阅者共享，避免重复的网络请求和逻辑执行。
- 简化Hook逻辑：通过useQuery，useToken2 Hook的代码变得极其简洁和易懂。我们不再需要useState来手动管理token，也不需要useEffect来监听状态变化并设置token，更不需要复杂的Promise、setInterval和setTimeout轮询逻辑。
-
staleTime 和 cacheTime:
- staleTime: 定义数据在多长时间内被认为是“新鲜的”。在staleTime内，组件挂载时不会重新获取数据。如果token一旦获取就不会改变，可以设置为Infinity。
- cacheTime: 定义数据在不被使用时缓存多长时间。默认是5分钟，之后会被垃圾回收。如果token需要长期保留在缓存中，也可以设置为Infinity。
Hook的消费方式
优化后的useToken2 Hook在使用上变得更加直观和简洁。
import React, { FC } from 'react';
import { useToken2 } from './useToken2'; // 假设你的 useToken2 在这个路径
const Test: FC = () => {
// 直接从 useToken2 获取 token，它已经是响应式的
const { token } = useToken2();
// token 会在 useQuery 成功获取后自动更新
// 无需 useEffect 监听或 .then() 处理
// useQuery 默认在 enabled 条件满足时自动运行，并在数据可用时更新 token
return (
<>
当前令牌：{token || '加载中...'}
);
};
export default Test;现在，Test组件可以直接从useToken2中获取token。当token可用时，组件会自动重新渲染并显示最新的令牌。useQuery在内部处理了所有异步加载、等待和状态更新的细节，使得组件的逻辑更加清晰。
注意事项与最佳实践
-
react-query的安装与配置：在使用useQuery之前，需要确保已安装react-query（或@tanstack/react-query），并且在应用根组件中配置了QueryClientProvider。
// _app.tsx 或应用的根组件 import { QueryClient, QueryClientProvider } from 'react-query'; // 或 '@tanstack/react-query' const queryClient = new QueryClient(); function MyApp({ Component, pageProps }: AppProps) { return ( queryKey的重要性：queryKey是react-query用于标识、缓存和管理查询的关键。它通常是一个数组，可以包含字符串和变量，以便在数据依赖于某些参数时能够正确地进行缓存和刷新。
-
处理加载和错误状态：useQuery不仅仅返回data，它还返回其他有用的状态，如isLoading、isError、error等，可以用于在UI中展示加载指示器或错误信息，提升用户体验。
const { data: token, isLoading, isError, error } = useToken2(); if (isLoading) return令牌加载中...; if (isError) return加载令牌失败: {error?.message}; return当前令牌：{token}; enabled选项的灵活运用：enabled是一个非常强大的功能，它允许你根据任何条件动态地启用或禁用查询，是处理依赖于其他异步数据或用户交互的查询的理想选择。
总结
在React Hook中处理异步数据，特别是当数据源本身具有延迟性时，传统的useState、useEffect结合手动轮询的方式容易引入复杂的时序问题、闭包陷阱和性能开销。通过引入react-query这样的专业异步数据管理库，我们可以利用其提供的useQuery Hook，以声明式、高效且健壮的方式解决这些挑战。useQuery的enabled选项、内置缓存和自动状态管理功能，极大地简化了Hook的逻辑，提升了开发效率和应用性能，是构建可靠React应用的推荐实践。
