可靠WebSocket重连需用Ref缓存socket和定时器，采用指数退避重试，组件卸载时清理连接与定时器，并在每次发送前校验readyState；useEffect清理函数必须显式调用socket.close()，事件监听须在effect内绑定并确保幂等性。
WebSocket断开后自动重连的可靠实现方式
单纯在 useeffect 里 new websocket() + onclose 中重新 new，大概率会触发无限重连、内存泄漏或重复监听。真正可用的重连必须控制重试节奏、避免竞态、且能被组件卸载中断。
核心思路是：用 Ref 缓存 socket 实例和定时器 ID，重连前先清理旧连接和定时器；重试间隔建议指数退避（如 1s → 2s → 4s → 最大 30s）；每次重连前检查组件是否还“活着”（isMounted Ref）。
- 不要在
onclose回调里直接调用重连函数——它可能在组件已卸载后触发 - 重连逻辑必须包裹在
setTimeout或setInterval中，并把 timer ID 存进useRef - 组件卸载时，要手动
socket.close()+clearTimeout/clearInterval - 首次连接失败（
onerror）也应触发重连，但需区分是连接拒绝还是网络中断
useEffect 里正确管理 WebSocket 生命周期的关键点
useEffect 的清理函数（return 后的函数）不是可选的补丁，而是 WebSocket 资源释放的唯一安全时机。漏掉它，页面跳转后 socket 仍在后台发消息、监听事件，甚至引发 WebSocket is already in CLOSING or CLOSED state 报错。
常见错误：把 socket.onmessage 绑定写在 effect 外部，或多次 effect 执行导致重复绑定；又或者没在清理函数中调用 socket.close()。
- 所有事件监听（
onopen、onmessage、onclose、onerror）必须在 effect 内绑定，且每次 effect 执行前先removeEventListener（如果用了 addEventListener）或直接覆写函数引用 - 清理函数中必须显式调用
socket.close(1000, 'cleanup')，不能只依赖浏览器自动回收 - 如果使用
useCallback包裹事件处理函数，注意 deps 变化会重建函数，导致旧监听未被清除 - 避免在 effect 中直接修改 state（如
setMessages），改用 functional update 或 ref 缓存最新 state
如何防止 useEffect 导致的重复连接和竞态请求
当组件快速挂载/卸载（比如路由切换、条件渲染），effect 可能反复执行，若没做防抖或状态同步，就会出现多个 socket 实例并存、消息乱序、甚至 InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state。
最轻量的解法是用一个 useRef 标记当前有效连接，并在每次连接成功后更新它；所有 send 操作前先校验 socket?.readyState === WebSocket.OPEN 且该 socket 是当前 ref 持有的实例。
- 用
const currentSocket = useRef<websocket null>(null)</websocket>始终指向最新合法 socket - 每次
new WebSocket()后立即赋值给currentSocket.current，并在 close/cleanup 时清空 - 发送消息前加判断：
if (currentSocket.current?.readyState === WebSocket.OPEN) - 避免在
onmessage中直接调用setState，改用useState的函数式更新或useReducer配合 ref 获取最新 state
React 18 严格模式下 useEffect 触发两次怎么办
开发环境下 React 18 默认启用严格模式，会故意对 effect 进行双调用（mount → unmount → mount），用于暴露副作用不纯净的问题。这会让 WebSocket 出现“刚连上就关、再连上”的闪烁行为，但生产环境不会发生。
这不是 bug，而是设计机制。解决方案不是禁用严格模式，而是让 effect 本身具备幂等性：第一次连接成功后，后续重复执行 effect 应识别已有连接并跳过新建。
- 用
useRef记录是否已初始化连接（initializedRef.current = true），effect 开头就 return - 不要把 socket 创建逻辑放在 effect 顶层，而是在一个带 guard 的函数里（如
connectIfNotConnected()） - 确保清理函数能安全执行多次（比如
socket?.close()本身是幂等的） - 测试阶段可临时关闭严格模式验证逻辑，但上线前务必恢复并确认双触发无副作用
WebSocket 的“活”不是靠不断重连维持的，而是靠连接状态可感知、生命周期可中断、消息收发可校验。最容易被忽略的是：组件卸载后，你写的 onmessage 回调还在运行，而此时 setState 已无效，但错误不会抛出——它只是静默地往一个不存在的 state 上拼命 set。
