Приложение React становится медленным, рендеринг медленным после отправки сообщения socketio

Question

У меня есть приложение реакции.Код работает отлично, но после его использования.Это начинает становиться медленным.Через некоторое время вы можете использовать его снова.

Когда вы нажимаете кнопку, я использую socketio для отправки сообщения.

Вызов функции занимает больше времени после многократного использования.

Вызов функции является частью websocket.js.Однако, когда вы углубляетесь в функции, создается впечатление, что рендеринг реакции занимает больше времени.

Функция, которая отнимает много времени.

Итак, реакция требуетмного времени, чтобы сделать вид.Тогда я могу только думать, что я не удаляю что-то, что будет использовать много памяти и, следовательно, замедлять процесс рендеринга.На рисунке вы видите, что он находится в файле react-dom.development.js, проблема также возникает при сборке для производства.

import React, { Component } from 'react';
import Card from './Card.js'

class Game extends Component {
  constructor(props) {
    super(props);
    this.state = {
      socket: this.props.socket,
      card: {
        "name": "",
        "cardValues": {}
      }
    }
    this.props.socket.emit("startGame");
  }
  render() {
    let {socket, card} = this.state;
    socket.on("startGame", (data) => this.setState({
        card: data["card"],
    }))
    socket.on("nextCard", (data) => this.setState({
        card: data["nextCard"],
    }))
    return (
      <div className="Game">
          <p>GAME</p>
          <Card socket={socket} card={this.state.card}/>
      </div>
    );
  }
}
export default Game;

В этой части используется класс Card.

import React, { Component } from 'react';

class Card extends Component {
  constructor(props) {
    super(props);
    this.state = {
      socket: this.props.socket,
    }
  }

  chooseCardValue = (value) => {
      this.state.socket.emit("chooseCard", {"cardValue": value});
  }

  render() {
    let card = this.props.card;
    return (
      <div className="Card">
          <h3 className="Country">{card["name"]}</h3>
          <ul>
            {
              Object.keys(card["cardValues"]).map((value, i) => {
                return <li key={i}><button onClick = {
                    this.chooseCardValue.bind(null, value)
                }>{value}: {card["cardValues"][value]}</button></li>
              })
            }
          </ul>
      </div>
    );
  }
}
export default Card;

Именно здесь определяются кнопки.При нажатии на кнопку запускается функция chooseCardValue, которая со временем замедляется.

Почему она становится такой медленной и в чем причина?

Я пытался включить только частиэто может быть актуально.Целые классы доступны здесь на всякий случай: https://lpaste.net/3474101090415280128

Answer 1

Вы присоединяете своих слушателей сокетов в методе рендеринга.Это означает, что каждый раз, когда ваше приложение перерисовывается, вы добавляете 2 дополнительных слушателя.Кроме того, внутри слушателей вы вызываете setState, что вызывает повторную визуализацию, которая добавляет другого слушателя.

При первом получении сообщения приложение будет отображаться один раз и добавит прослушиватель.Во второй раз, когда вы получите сообщение, ваше приложение будет отображаться дважды (по одному для каждого слушателя), и вы добавите 2 слушателя.В третий раз будет 4 рендера.Затем 8, 16, 32 и т. Д.

По сути, вам не нужно добавлять этих слушателей в метод рендеринга.Вы можете попытаться переместить их в метод constructor или componentDidMount, но на самом деле это должно быть где-то вне дерева компонентов.

Для ясности, это строки, о которых я говорю:

let {socket, card} = this.state;
socket.on("startGame", (data) => this.setState({
    card: data["card"],
}))
socket.on("nextCard", (data) => this.setState({
    card: data["nextCard"],
}))