前端 - 全局的原生webSocket写在什么位置？

Question

1.umi项目中的model是全局的，如果我写在model里：socket.ts，取得的数据用useState保存，那所有用到这个model的组件都会随着useState的更新而更新，不管有没有用到变化的数据。
2.如果我把socket写在ts文件中，import它，要怎么在其它组件中拿到数据。

上面的两点都可以通过事件总线，在收到数据时emit出来，但是看起来这个操作有点多余。

Answer 1

用自定义Hook:

// useWebSocket.jsimport { useState, useEffect } from 'react';function useWebSocket(url) {  const [data, setData] = useState(null);  const [socket, setSocket] = useState(null);  useEffect(() => {    const ws = new WebSocket(url);    setSocket(ws);    ws.onmessage = (event) => {      setData(JSON.parse(event.data));    };    return () => {      ws.close();    };  }, [url]);  return { data, socket };}export default useWebSocket;

在你的组件里用Hook:

import useWebSocket from './useWebSocket';function MyComponent() {  const { data, socket } = useWebSocket('ws://example.com/socket');  // ...}

或者用Context API:

// WebSocketContext.jsimport React, { useState, useEffect, createContext } from 'react';export const WebSocketContext = createContext();export function WebSocketProvider({ children }) {  const [data, setData] = useState(null);  const [socket, setSocket] = useState(null);  useEffect(() => {    const ws = new WebSocket('ws://example.com/socket');    setSocket(ws);    ws.onmessage = (event) => {      setData(JSON.parse(event.data));    };    return () => {      ws.close();    };  }, []);  return (    <WebSocketContext.Provider value={{ data, socket }}>      {children}    </WebSocketContext.Provider>  );}

然后在你的组件里：

import React, { useContext } from 'react';import { WebSocketContext } from './WebSocketContext';function MyComponent() {  const { data, socket } = useContext(WebSocketContext);  // ...}

Answer 2

确实，这个问题涉及到了在React/UMI项目中如何全局使用WebSocket，以及如何在组件之间共享数据的问题。

首先，对于你的第一个问题，把WebSocket写在model里并使用useState保存数据，确实会导致所有使用这个model的组件都会随着useState的更新而更新，不管有没有用到变化的数据。这是由于React的响应性系统导致的，当state更新时，所有的依赖这个state的组件都会重新渲染。

然后，对于你的第二个问题，如果你把WebSocket写在单独的ts文件中，并导入到其他组件中，那么你需要通过事件或者状态管理来在组件之间共享数据。你已经提到了使用事件总线来在收到数据时emit出来，这是一种可行的方案。但是这确实看起来有些多余，如果你已经在组件之间共享了WebSocket实例，那么每个组件都需要单独处理接收到的数据，这可能会产生很多重复的代码。

一个更好的解决方案可能是使用一个专门的状态管理库，比如Redux或者Mobx。你可以在应用程序的根组件中使用WebSocket，并把接收到的数据存储在状态管理库中。然后你可以在任何需要这些数据的组件中使用状态管理库的API来获取数据。这样只有真正需要数据的组件才会因为数据的变化而更新。

如果你不想使用状态管理库，还有一个可行的方案是使用React的Context API。你可以创建一个包含WebSocket实例和接收到的数据的Context，然后让需要这些数据的组件都使用这个Context。当数据变化时，只有依赖这个Context的组件才会更新。

总的来说，这个问题没有简单的答案，因为解决方案取决于你的应用程序的具体需求和结构。你可能需要结合使用上述的几种方法来解决你的问题。