我是 React 的新手，我在组件结构和在它们之间共享 websocket 方面遇到了一些问题。
该应用程序由类别和产品组成。初始数据加载将通过 Ajax 请求完成，并且将使用 websocket 保持数据更新。
我的组件层次结构如下所示：
CategoriesList 保存类别的状态，而 ProductsList 保存类别内产品的状态。
所以我想在 CategoriesList 和 ProductsList 中使用相同的 websocket，但监听不同的 websocket 事件：category:updated 和 product:updated。
如何在组件之间共享 websocket 以及初始化它的正确位置？
由于每个类别都有一个 ProductsList，这是否意味着 products:updated 事件将触发多次（每个类别一个）？我想这在性能方面不是一件好事。
共享同一个实例的另一种方法是简单地创建一个新文件，如下所示：socketConfig.js
import openSocket from 'socket.io-client';
const socket = openSocket("http://localhost:6600");
export default socket;
并在您想要的任何文件中使用它，只需导入它。
import socket from "../socketConfig";
这对我有用，因为我在 2 个不相互依赖的不同组件中使用它。
我建议在 CategoriesList 中初始化您的套接字连接，然后将连接作为props传递给子组件。当连接向下传递时，您应该能够根据需要使用它来侦听子组件中的特定事件。
这是 github 上使用 react 和 socket.io 的示例应用程序。套接字在父组件中初始化，然后向下传递。https://github.com/raineroviir/react-redux-socketio-chat/blob/master/src/common/containers/ChatContainer.js
在第 9 行，连接被初始化，然后在第 23 行，它作为 props 传递。该连接稍后在子组件中用于接收和发出事件。例如：https : //github.com/raineroviir/react-redux-socketio-chat/blob/master/src/common/components/Chat.js
如果您使用的是 Redux Store，则将 存储socket在 Redux Store 中，然后您可以像其他存储变量/状态一样从任何组件访问它。
组件：A（在组件A中定义Socket）
//...
const dispatch = useDispatch();
useEffect(() => {
const socket = io("http://localhost:8000");
socket.on("connect", () => {
console.log("Connected to Socket");
dispatch({
type: "INIT_SOCKET",
socket: socket
});
});
}, [...]);组件：B（在另一个组件中使用 Socket）
//...
const socket = useSelector(state => state.socket);
useEffect(() => {
if (socket) {
socket.on("msg", (data) => {
console.log(data);
});
}
}, [socket]);只需在组件外部声明套接字，同样如此......
import SocketIOClient from 'socket.io-client';
const socket=SocketIOClient('http://localhost:3000/chat')
function App() {
//use socket here ...
return (
<div> </div>);
}