javascript - Reactjs:如何在组件之间共享一个 websocket

Question

我是 React 的新手，我在组件结构和它们之间共享 websocket 方面遇到了一些问题。

该应用程序由类别和产品组成。初始数据加载将通过 Ajax 请求完成，并且将使用 websocket 保持数据更新。

我的组件层次结构如下所示:

• 类别列表
  • 类别
    • 产品列表
      • 产品

CategoriesList 保存类别的状态，ProductsList 保存类别中产品的状态。

所以我想在 CategoriesList 和 ProductsList 中使用相同的 websocket，但监听不同的 websocket 事件:category:updated 和 product:updated。

如何在组件之间共享 websocket 以及初始化它的正确位置？

由于每个类别都有一个 ProductsList，这是否意味着 products:updated 事件将触发多次(每个类别一个)？我想这在性能方面不是一件好事。

Answer 1

共享同一个实例的另一种方法是简单地创建一个新文件，如下所示:socketConfig.js

import openSocket from 'socket.io-client';

const socket = openSocket("http://localhost:6600");

export default socket;

并在您想要的任何文件中使用它，只需导入它即可。

import socket from "../socketConfig";

这对我有用，因为我在 2 个彼此不依赖的不同组件中使用它。