Reactjs：コンポーネント間でwebsocketを共有する方法

Question

私はReactを初めて使用しています。コンポーネント構造とwebsocketを共有する際にいくつか問題があります。

アプリはカテゴリと商品で構成されています。初期データのロードはAjaxリクエストで行われ、websocketはデータの更新を維持するために使用されます。

マイコンポーネント階層は次のようになります。

• CategoriesList
  • カテゴリー
    • ProductsList
      • 製品

CategoriesListはカテゴリの状態を保持し、ProductsListは、カテゴリ内の製品の状態を保持しています。

私はCategoriesListとProductsListの中で同じwebsocketを使用したいと思いますが、websocketの別のイベントを聴いています：category：updatedとproduct：updated。

どのようにコンポーネント間でwebsocketを共有し、どこで初期化するのが適切ですか？

カテゴリごとに1つのProductsListがあるため、製品：更新されたイベントが複数回（各カテゴリに1つずつ）発生しますか？私はこれがパフォーマンス面では良いことではないと思います。

Answer 1

CategoriesListでソケット接続を初期化し、その接続を子コンポーネントにpropsとして渡すことをお勧めします。接続が拒否されると、子コンポーネントで必要に応じて特定のイベントをリッスンすることができます。

ここでは、reactとsocket.ioを使用するgithubのアプリケーション例を示します。ソケットは親コンポーネントで初期化され、その後に渡されます。 https://github.com/raineroviir/react-redux-socketio-chat/blob/master/src/common/containers/ChatContainer.js

9行目で接続が初期化され、23行目では小道具として渡されます。この接続は、子コンポーネントで後でイベントを受信して​​送信するために使用されます。例：https://github.com/raineroviir/react-redux-socketio-chat/blob/master/src/common/components/Chat.js

Answer 2

react-cent 独自のプロバイダ（CentProvider.js）を記述してコンポーネントをラップし、クライアントからコンテキストを提供することができます。さらに、Higher-Order Component（CentComponent.js）を書いて、それを利用できるようにしてください。this.props.<client>