在 React 应用开发中，如何高效地获取与存储全局数据——尤其是用户信息、场地数据和 WebSocket 连接——一直是开发者面临的经典难题。随着应用规模的增长，组件间的状态共享、数据一致性和性能优化变得愈发复杂。本文将结合最新实践，为您梳理在 React 中管理这三类全局数据的推荐方案。

用户数据：从认证到持久化

用户数据（如 ID、角色、权限列表）是全局状态中最敏感也最频繁使用的部分。传统做法是在顶层组件通过 useEffect 发起 API 请求，再将结果存入 Redux 或 Context。但近年社区更推崇轻量化方案：

  • Context + useReducer：适用于中小型应用。通过封装 AuthProvider，在应用启动时调用 /me 接口获取当前用户，并用 useReducer 管理登录/登出状态。优点是零依赖，缺点是需要手动处理性能优化（如 memo）。
  • Zustand：状态管理库中的“黑马”。无需 Provider，直接创建一个 useAuthStore，在 store 内调用 fetch，并利用 subscribe 实现跨组件响应。代码量比 Redux 少 60% 以上，且 TypeScript 友好。
  • React Query / SWR：对于只读的用户数据，这两个库尤为合适。它们自动处理缓存、重试和失效，且不污染全局状态树。例如，在 useMe hook 中直接调用 API，数据将通过缓存共享给所有组件。

关键建议：永远不要在数据库中存储用户的明文密码或 token。使用 httpOnly Cookie 配合 CSRF 保护，前端仅保存用户元数据与短时效的访问 token。

场地数据：动态加载与局部化

场地（Venue）数据通常包含地理位置、设施列表、营业时间等，具有“按需加载”和“局部复用”的特点。与用户数据不同，场地数据往往随用户交互（如选择城市、搜索地点）而变化。

  • 分片存储：不要将所有场地数据一股脑塞入全局 store。推荐将“当前活跃场地”存储于全局（如 Redux 的 currentVenue），而场地列表仅保存在路由层或组件级状态中。
  • 使用 selectors 避免重复请求：在 Redux Toolkit 中，利用 createEntityAdapter 管理场地实体，通过 selectById 查询特定场地，保证同一个 ID 仅请求一次。
  • 结合 URL 参数：React Router 的 useParams 可提取场地 ID，与状态库联动。比如在 VenueDetailPage 中，若 store 中没有对应数据，则触发 fetchVenueById action。这样既避免全局污染，又能实现后退缓存。

Socket 连接：生命周期与复用

WebSocket 是全局数据的特殊形式——它既是连接状态，也是实时数据流。管理不善会导致内存泄漏、重复连接甚至跨页面状态错乱。

  • 单例模式：将 Socket 实例挂载在全局对象（如 window.socket）或 Zustand/Redux 的 store 中。WebSocket 不同于普通状态，它的生命周期应独立于 React 组件的挂载/卸载。
  • 使用 ref + useEffect cleanup：在 App 组件或专门的 SocketProvider 中创建连接，并在 useEffect 的清理函数中关闭。同时利用 useRef 存储 socket 实例，避免重渲染时重建。
  • 事件订阅管理：不要直接在组件中绑定 socket.on，而是创建一个事件中心。例如，将 socket 事件转化为 Redux action 或 Zustand 的 set 函数，这样所有组件都通过状态变更来响应数据推送，便于测试和调试。
  • 心跳与重连：一种常见策略是在 store 内维护一个 socketStatus（connected/disconnected/reconnecting），结合 setInterval 发送 ping，收到 pong 后更新状态。当检测到断开时，自动调用重连逻辑。

综合架构：混合策略

没有银弹。根据应用复杂度，可以混合使用上述方案：

  • 小型应用：Context + useReducer 管理用户和场地，直接在 App 内创建单例 Socket，用 window 对象暴露。
  • 中型应用：Zustand 管理用户和 socket 状态，React Query 管理场地列表等服务端数据，配合路由参数实现按需加载。
  • 大型应用：Redux Toolkit + RTK Query 统一管理所有全局数据（用户、场地、socket 事件自动转为缓存更新），借助 createAsyncThunk 和 middleware 处理 socket 连接。

未来趋势：Server Components 与 RSC

随着 React 18 的 Server Components 推广，全局数据的获取位置正在发生根本性变化。未来，某些用户数据（如匿名浏览）可直接在服务端获取并序列化为 HTML，减少前端请求。而 WebSocket 和需要实时交互的场地数据，仍将保留在客户端。开发者需要密切关注 React 官方朝向“渐进取水”（Progressive Hydration）的演进。

结语：全局数据的获取与存储并非一成不变的模式，而是需要根据数据特性、更新频率和团队习惯来权衡。对于用户、场地和 Socket 这三类典型数据，遵循“分层管理、按需加载、避免重复”的原则，将帮助你的 React 应用在可维护性与性能之间找到最佳平衡点。