本文详解 react 应用中 useeffect 钩子意外触发多次（如 4 次）的根本原因，聚焦于构建工具（如 react-scripts）导致的组件重复挂载/卸载行为，并提供可验证的修复方案与最佳实践。
在 React 开发中，useEffect 的空依赖数组（[]）本应确保其回调仅在组件首次挂载后执行一次——这是实现“初始化逻辑”（如 WebSocket 连接、第三方 SDK 初始化）的标准模式。然而，实践中开发者常遇到 useEffect 被调用 2 次、4 次甚至更多，伴随控制台反复打印、连接失败（如 WebSocket is closed before the connection is established）等现象。这并非 React 本身 Bug，而多源于开发环境构建工具的副作用行为。
根本原因：开发服务器的热重载机制引发重复挂载
关键线索已在问题答案中明确指出：“The problem goes away when I try it with vite instead of react-scripts.”
这直指核心——react-scripts（Create React App 默认构建工具）在开发模式下，其 Webpack Dev Server 的热更新（HMR）策略有时会触发组件的意外卸载与重新挂载，尤其在模块边界不清晰或存在某些副作用导入时。即使未启用 Strict Mode，该行为仍可能发生。此时：
- useRef 创建的引用（如 clientInit）在每次新挂载时都会被重新初始化为 false；
- useEffect 回调随之重复执行；
- 多个 SockJS 实例并发尝试连接同一 WebSocket 地址，但前几次因上一个实例尚未完全清理或端口竞争而失败，仅最后一次成功。
✅ 验证方式：在 useEffect 清理函数中添加 console.log('cleanup')，若看到多次输出，即证实组件被重复卸载。
正确修复：双重检查 + 连接状态守卫
单纯依赖 useRef 不足以防御重复挂载。必须结合连接状态管理与幂等性校验。以下是优化后的 useEffect 实现：
useEffect(() => {
// ✅ 关键：使用 useState 管理连接状态，而非仅 rely on useRef
if (connected || clientInit.current) return; // 双重守卫：已连通 或 已标记初始化
console.log("Initializing STOMP client...");
clientInit.current = true;
const socket = new SockJS("/chat");
const stompClient = Stomp.over(socket);
stompClient.connect(
{ "client-id": userData.userId },
() => {
console.log("STOMP connected successfully");
setConnected(true);
setStompClient(stompClient);
},
(error) => {
console.error("STOMP connection failed:", error);
// ✅ 可选：失败后重置 clientInit，允许重试（按需）
// clientInit.current = false;
}
);
// 清理函数：确保断开连接
return () => {
if (stompClient && stompClient.connected) {
console.log("Disconnecting STOMP client");
stompClient.disconnect();
}
};
}, [connected, userData.userId]); // ✅ 添加必要依赖，避免 stale closure注意事项与最佳实践
- 避免仅依赖 useRef 做初始化守卫：useRef 在组件重复挂载时会被重置，它适合存储跨渲染的可变值，但不能替代状态驱动的业务逻辑判断。
- 清理函数必须健壮：确保 stompClient.disconnect() 在连接建立后才调用，且检查 connected 状态或 stompClient?.connected 属性，防止对已断开实例重复调用。
- 构建工具选择影响开发体验：Vite 因其更精准的 HMR 实现，极少引发此类问题；若长期受困于 react-scripts 的挂载异常，迁移到 Vite 是高效解决方案（迁移成本低，官方文档完善）。
- 生产环境无需担忧：该问题仅存在于开发环境（react-scripts start），生产构建（react-scripts build）无此行为，不影响线上稳定性。
通过状态守卫 + 清理逻辑加固 + 构建工具审视，即可彻底解决 useEffect 多次触发导致的 WebSocket 初始化混乱问题，让连接逻辑真正“只执行一次”。
