Javascript 反应/生命周期

我想连接我的api，它有一个套接字服务器，我将在那里实时交换信息

然后我需要用api返回的每一条新消息更新一些组件，但是我对使用什么有点怀疑， 当我与

组件中的scoket的连接将挂载时

以及

componentDidMount

我如何创建一个上下文，以便在每个套接字的后端发生更改时使某些组件保持最新

如果有人能举个例子，我将不胜感激

一个例子：

import React, {useEffect, Component} from 'react';
import api from '../../services/api'
import io from 'socket.io-client';
import './index.css'
export default class Home extends Component { 

    constructor(){
        super()

        this.state = {
          informationReceived: 'Nothing yet!',
          playerOne: 'Jogador 1',
          playerTwo: 'Jogador 2',
          socket: null
        }
        const token = localStorage.getItem('token');
        this.state.socket = io('http://localhost:8080', {
            query: { token: token }
        });
        var nome = prompt("Seu nome é:");
        this.state.socket.emit('adicionar-jogador', nome);
        this.state.socket.on('player conectado', (receivedInfo) => {
            this.setState({
              playerOne: receivedInfo[0].id,
              playerTwo: receivedInfo[1].id
            })
          });
        this.state.socket.on('fila', (receivedInfo) => {
            console.log('entrou')
            console.log(receivedInfo);
        });
      }


      emitInfoToAll = () => {
        const token = localStorage.getItem('token');
        console.log('entrou')
        const { socket } = this.state;

        socket.emit('myevent', 'Hello realtime connected users!')
        console.log(this.state.informationReceived);
      }
      render() {
        const { informationReceived } = this.state;
        const message = informationReceived;
        console.log(message);
    return (
        <div>
           <h1 id="resultado"></h1>
                <div id="player-1" className="user-panel">
                    <p>Nome: <span className="nome">{this.state.playerOne}</span></p>
                    <p>Pontos: <span className="pontos">0</span></p>
                    <div className="botoes">
                        <button onClick= {() => this.emitInfoToAll()} >Pedra</button>
                        <button>Papel</button>
                        <button>Tesoura</button>
                    </div>
                    <div className="jogada"></div>
                </div>

                <br />


                <br />
                <br />

                <div id="player-2" className="user-panel">
                <p>Nome: <span className="nome">{this.state.playerTwo}</span></p>
                    <p>Pontos: <span className="pontos">0</span></p>
                    <div className="botoes">
                        <button>Pedra</button>
                        <button>Papel</button>
                        <button>Tesoura</button>
                    </div>
                    <div className="jogada"></div>
                </div>

                <p id="espera"></p>  
    </div>
    );
    }
}

import React，{useffect，Component}来自'React'；
从“../../services/api”导入api
从“socket.io客户端”导入io；
导入“./index.css”
导出默认类主扩展组件{
构造函数（）{
超级（）
此.state={
收到的信息：“还没有！”，
解说员：“Jogador 1”，
球员二：“Jogador 2”，
套接字：空
}
const token=localStorage.getItem（'token'）；
this.state.socket=io（'http://localhost:8080', {
查询：{token:token}
});
var nome=提示（“Seu nomeé：”）；
this.state.socket.emit（'adicionar-jogador'，nome'）；
this.state.socket.on（'player conectado'，（receivedInfo）=>{
这是我的国家({
播放员：receivedInfo[0]。id，
playerTwo:receivedInfo[1]。id
})
});
this.state.socket.on（'fila'，（receivedInfo）=>{
console.log（'entrou'）
控制台日志（receivedInfo）；
});
}
emitInfoToAll=（）=>{
const token=localStorage.getItem（'token'）；
console.log（'entrou'）
const{socket}=this.state；
emit（'myevent'，'Hello realtime connected users！'）
console.log（this.state.informationReceived）；
}
render（）{
const{informationReceived}=this.state；
const message=接收到的信息；
控制台日志（消息）；
返回(
诺姆：{this.state.playerOne}

庞托斯：0

this.emitInfoToAll（）}>Pedra
丘疹
特苏拉






诺姆：{this.state.playerTwo}

庞托斯：0

佩德拉
丘疹
特苏拉

);
}
}

您能提供您尝试过的代码吗？@Mashiro是的，我现在编辑