（2666期）Realtime React Hooks – 实时数据 Hook，秒连稳传零闪烁

实时数据 Hook，秒连稳传零闪烁 React 实时数据 Hook 库，集成 SSE、WebSocket 与 SWR，提供连接管理、自动重连及乐观更新模式，适用于仪表盘、聊天等实时场景。 使用说明 核心用法 本技能提供五类生产级 React Hooks 模式，覆盖主流实时数据方案： 1. SSE Hook —— 基于 EventSource 的轻量订阅，适合服务器单向推送场景（股票行情、系统通知），自动管理连接状态与 cleanup。 2. WebSocket Hook —— 全双工通信，内置指数退避重连（maxRetries 默认 5 次），支持手动 send 发送消息，适用于聊天、协作编辑。 3. SWR + 实时融合 —— 结合 useSWR 的缓存策略与 SSE 推送，实现「乐观更新」：先 mutate 本地缓存，后同步服务端，避免闪烁。 4. 订阅模式 Hook —— 基于 WebSocket 的多频道管理，自动处理 subscribe/unsubscribe 生命周期，适合多房间/多租户架构。 5. 连接状态组件 —— 可复用的视觉指示器，反馈实时性体验。 显著优点 类型完备：TypeScript 泛型支持，数据解析带 try/catch 防护 生产就绪：重连退避、连接清理、最大重试次数等边界已处理 生态兼容：与 SWR 无缝整合，保留其缓存、重验证策略 心智模型简洁：每个 Hook 职责单一，可组合使用 潜在局限 未内置身份鉴权：URL 需自行携带 token（如 ?token=xxx） 重连逻辑仅支持固定 URL，动态 endpoint 需二次封装 SSE 的 EventSource 无法自定义请求头，需服务端配合 cookie 鉴权 乐观更新未提供冲突解决策略，强一致性场景需额外处理 适合人群 中高级 React 开发者，熟悉 hooks 闭包与 effect 清理 需快速搭建实时仪表盘、数据监控、即时通讯功能的前端团队 已使用 SWR 并希望增量添加实时能力的项目 常规风险 内存泄漏：组件卸载时未关闭连接（已内置 cleanup，但自定义封装时易遗漏） 重连风暴：网络抖动时指数退避虽缓解，但服务端仍需限流防护 数据竞态：乐观更新与手动 refetch 并发时，可能覆盖新数据 跨域限制：SSE/WebSocket 需服务端配置 CORS 或同源策略 原始说明 React hooks for real-time data with SSE, WebSocket, and SWR integration. Covers connection management, reconnection logic, and optimistic updates. Use when building React apps with real-time features. Triggers on SSE hook, WebSocket hook, real-time React, useEventSource, live updates.