Reactjs 如何在不重新连接的情况下更新Socket.io处理程序

我有一个react native项目，它使用socket.io与express服务器通信

我正在寻找一种只初始化一次连接的方法，而不是每次渲染都重新连接

我首先尝试将连接包装在

useffect

hook中：

useEffect(() => {
        const socket = io(Configs.serverURL);
        ...
        socket.on('connect', () => { ... }
        socket.on('data', () => { ... }
});

问题是，我无法访问此范围之外的套接字对象，并且如果处理程序所依赖的任何值发生更改，则不会更新处理程序

然后，我试图通过设置一些状态变量来将初始化与处理程序分开

const [socket, setSocket] = useState(null);
...
useEffect(() => {
        setSocket(io(Configs.serverURL));
});

useEffect(() => {
        socket.on('connect, () => { ... });
        ...
}, [dependency1, dependency2])

但是，我遇到了一个错误，该错误表示

无法读取null的属性“on”

总而言之：我需要在任何本地范围之外初始化套接字实例，我还需要在任何其他处理程序之前只初始化一次

定义套接字上下文

---

好。但是如果我需要根据socketRef以外的依赖状态更新处理程序，该怎么办？更新我的答案，让我知道它是否有效。谢谢。我尝试了这一点，但服务器在每次重新渲染和每次状态更新时都会收到一个新连接，我只需要连接一次，但在某些状态更新时会更新处理程序。然后，您需要使用React-Context API创建上下文，我将在回答中显示

const socket = io(Configs.serverURL);
const socketContext = React.createContext(null);
export const ContextProvider = ({children}) => {
  return (
    <socketContext.Provider value={socket}>
      {children}
    </socketContext.Provider>
  );
}

export const useSocketContext = () => {
  return useContext(socketContext);
}

<ContextProvider>
  {
  //Your components here
  }
</ContextProvider>

const socket = useSocketContext();

useEffect(() => {
  socket.on('connect', () => { ... });
  ...
}, [dependency1, dependency2])