如何在仅执行一次的useEffect中使用context中的值

核心问题 #

• 现有代码的useEffect未声明依赖数组，每次组件渲染都会重新执行，必然导致重复创建WebSocket连接
• 如果把useEffect依赖设为空数组保证仅初始化一次，内部闭包捕获的GeneralInfoContext.reload会永远停留在首次渲染的版本，context更新后无法同步到闭包内部
• 之前尝试useRef未生效，是因为只对WebSocket实例做了ref存储，没有把需要动态更新的context方法同步到ref中

最优改法（兼容现有逻辑） #

新增一个ref实时同步context的reload方法，WebSocket初始化的useEffect仍保持空依赖仅执行一次，内部永远从ref拿最新的reload方法即可，完整代码如下：

import { useRef, useEffect, useContext } from 'react';
// 先从Context拿到最新的reload方法
const GeneralInfoContext = useContext(/* 你的Context实例 */);
const { reload } = GeneralInfoContext;

// 存储WebSocket实例，保留你原有在外部调用的逻辑
const ws = useRef<WebSocket>();
// 新增ref存储实时更新的reload方法
const reloadRef = useRef(reload);

// 每次context的reload更新时，同步到ref中
useEffect(() => {
  reloadRef.current = reload;
}, [reload]);

// WebSocket初始化逻辑仅执行一次，依赖为空数组
useEffect(() => {
  ws.current = new WebSocket("ws://localhost:5000");
  
  // 把事件处理函数单独抽离，方便后续清理
  const handleOpen = () => {
    console.log("opened connection");
  };
  const handleMessage = (message: MessageEvent) => {
    const messageData: ResponseData = JSON.parse(message.data);
    const { response, reload: shouldReload } = messageData;

    if (typeof response === "string") {
      const event = new CustomEvent<ResponseData>(response, {
        detail: messageData,
      });
      ws.current?.dispatchEvent(event);
    } else {
      if (shouldReload !== undefined) {
        console.log("general info should reload now");
        // 从ref拿最新的reload方法，永远不会是旧值
        reloadRef.current(shouldReload);
      }
      console.log(messageData);
    }
  };

  ws.current.addEventListener("open", handleOpen);
  ws.current.addEventListener("message", handleMessage);

  // 必须添加清理函数，避免组件卸载后内存泄漏、残留连接
  return () => {
    ws.current?.removeEventListener("open", handleOpen);
    ws.current?.removeEventListener("message", handleMessage);
    ws.current?.close();
  };
}, []);

这个方案既保证WebSocket仅初始化一次不会产生重复连接，又能实时拿到最新的context方法，同时不影响你在useEffect外部使用ws.current调用WebSocket实例。

扩展优化方案（全局复用场景） #

如果WebSocket是整个应用通用的能力，可以把连接逻辑抽离到单独的Context Provider中：

• 在Provider内部完成WebSocket初始化、消息监听、断线重连等通用逻辑
• 业务组件直接从自定义的WebSocketContext拿实例或者封装好的发送/监听方法
• context的reload方法可以直接在Provider内部引入，完全避免闭包问题

内容的提问来源于stack exchange，提问作者Matus86309