Javascript React应用程序在发出socketio消息后变慢渲染变慢

我有一个react应用程序。代码确实可以完美地工作，但在使用它之后。开始变慢了。等待一段时间后，您可以再次使用它

当您按下按钮时，我使用socketio发出消息

函数调用多次使用后需要更长时间。

函数调用是

websocket.js

的一部分。但是，当您深入研究函数时，react渲染似乎需要更长的时间

花费大量时间的函数。

因此，react渲染视图需要很多时间。我只能这样想，我不会删除一些会占用大量内存从而减慢渲染过程的内容。在图片上，您可以看到它位于文件

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;

按钮就是在这里定义的。当您单击该按钮时，它会触发函数

chooseCardValue

，该函数在经过一段时间后会变慢

为什么它变得如此缓慢，原因是什么

---

我试图只包括可能相关的部分。整个类在这里都可用，以防万一：

您将套接字侦听器附加到render方法中。这意味着每次应用程序重新呈现时，您都会添加两个额外的侦听器。此外，在侦听器内部调用

setState

，这会触发重新渲染，从而添加另一个侦听器

第一次收到消息时，应用程序将呈现一次，并添加一个侦听器。 第二次收到消息时，应用程序将呈现两次（每个侦听器一次），并添加两个侦听器。 第三次将有4个渲染。 然后是8、16、32等等

本质上，您需要做的不是在render方法中添加这些侦听器。您可以尝试将它们移动到

构造函数

或

componentDidMount

方法，但实际上它应该位于组件树的外部

为了清楚起见，我要说的是：

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

---

有人对我的问题投了反对票。我不知道为什么，我非常感谢反馈，所以我知道我可以做些什么来改进我的问题。我不知道为什么这个问题被否决了，这是一个非常详细的问题，有很好的例子。我已经找了一段时间了，你的问题让我找到了答案。谢谢，所以所有的

套接字.on

事件都应该在

componentDidMount

中，或者在远离组件的另一个文件中？如果你知道任何这样做的例子，我很高兴知道。另外：这个例子在这里也被认为是“坏的”：或者为什么在这种特殊情况下会这样做？

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