Suspense 不支持 SSE 流式数据，需用自定义 Hook 封装 EventSource 并管理状态，Suspense 仅用于首次连接等待态的 fallback；Hook 负责流数据解析、增量更新与连接生命周期控制。
React 的 Suspense 本身不支持流式数据注入，SSE（Server-Sent Events）是单向、长连接的流式通信机制，而 Suspense 设计用于等待 Promise 完成（即“一次性加载完成”），二者语义不匹配。想让 SSE 数据驱动组件按需渲染，不能直接交给 Suspense 管理，而是需要在组件内部手动处理流，并配合 Suspense 的 fallback 行为做体验优化。
用自定义 Hook 封装 SSE 连接与状态更新
核心思路是：把 SSE 连接逻辑抽离为可复用 Hook，它返回当前已接收的数据片段（如数组或 Map），并触发局部 re-render；Suspense 不接管数据加载，只包裹可能“初始无数据”的 UI 区域（比如首次连接前的 loading 状态）。
- Hook 内部用 EventSource 建立连接，监听 message 事件，将每条数据 push 到本地状态（如 useState 或 useReducer）
- 避免直接 setState({ data: [...prev, new]}) 导致频繁重渲染，可用 useMemo 或 useRef + useEffect 缓存增量数据结构
- 连接失败时调用 throw new Promise(() => {}) 可触发 Suspense fallback（但仅适用于初始化失败，非流中错误）
用 Suspense 包裹“首次连接等待态”，而非流式过程
Suspense 的 fallback 适合展示“尚未建立连接或首条数据未到”的状态，而不是整个流过程。例如：
- 组件挂载后立即调用 useSSE('/api/updates')，Hook 在首次连接成功前可返回 undefined 或空数组
- 组件内判断 if (!data) throw new Promise(r => {}) —— 这会触发 Suspense fallback，直到第一条消息到达才继续渲染
- 后续新消息到来只触发普通更新，不重新进入 Suspense
流式数据需主动映射到 React 渲染单元
SSE 发送的是连续事件，React 组件默认不会自动响应“追加一条记录”这种变化。必须显式将流数据转化为可 diff 的结构：
立即学习“Java免费学习笔记（深入）”；
- 服务端发送带 id 的 JSON：{"id": "item-123", "type": "add", "payload": {...}}
- 客户端 Hook 维护一个 Map
或 Record ，按 id 更新/插入/删除 - 组件中用 Array.from(map.values()) 或 Object.values(obj) 转为数组供 map 渲染，确保 key 稳定
避免内存泄漏与重复连接
流式连接生命周期必须严格绑定组件卸载：
- useEffect 中创建 EventSource 后，return () => source.close() 是必须项
- 不要在每次 render 重建 EventSource，否则会累积连接；可在 Hook 内用 useRef 缓存实例
- 考虑添加重连逻辑（如 onerror 回调中 setTimeout 重启），但需防无限重试，建议加退避策略
不复杂但容易忽略：Suspense 和 SSE 是不同维度的工具——前者管“等待确定性结果”，后者管“持续接收不确定性增量”。把它们组合好，关键在于分清职责边界：让 Suspense 守住首次加载门槛，让 Hook 扛起流式更新责任。
