Question

我目前正在开发一个ReactJs应用程序，该应用程序以每秒大约100条消息的速度从nodejs后端接收消息。当我将消息缩放到每秒10左右时，我的表可以正常显示并进行更新。但是，当将其设置回100条消息时，应用程序将无法呈现。

这是我的表格组件，用于建立websocket连接并侦听消息

const ws = new WebSocket("ws://localhost:7770");

class SortedTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      sortedInfo: {
        order: 'descend',
        columnKey: 'value',
      }
    };
  }

  //Handle socket setup
  componentDidMount = () => {
    ws.onopen = () => {
      ws.send('init');
    };
    ws.onmessage = (e) => {
      let message = null;
      try {
        message = JSON.parse(e.data);
      } catch (e) {
        console.log('malformed message');
      }
      if (message) {
        let seenIdFlag = false;
        message.key = message.id;
        this.state.data.map((elem, i) => {
          if (elem.id === message.id) {

            //Updating row based on incoming socket message
            const updatedRows = this.state.data.slice();
            updatedRows[i].name = message.name;
            updatedRows[i].value = message.value;
            this.setState({ data: updatedRows });
            seenIdFlag = true;
          }
        });

        //Populating initial data list with unique IDs
        if (this.state.data.length <= 99 && seenIdFlag === false) {
          this.setState({ data: this.state.data.concat([message]) });
        }
      }
    };
  }

  //Destroy socket connection
  componentWillUnmount = () => {
    ws.onclose = () => {
      ws.send('close');
    };
  }

这是我的渲染方法

render() {
let { sortedInfo } = this.state;
const columns = [
  {
    title: "Id",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "Value",
    dataIndex: "value",
    key: "value",
    sorter: (a, b) => a.value - b.value,
    sortOrder: sortedInfo.columnKey === 'value' && sortedInfo.order,
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  }
];

return (
  <div className="table-sorting">
    <Table columns={columns} dataSource={this.state.data} pagination={false} size="small" />
  </div>
);

}

我是否在做固有错误的操作，导致每秒处理数百次状态时导致性能问题？如您所见，我通过检查某个项目的ID是否已被推送到表中来处理该表，一旦表达到100个项目，我便检查是否有新的传入消息共享某个对象在我的状态对象数组中，然后更新该项目并设置状态。

在onmessage函数内是否设置了多次错误的状态？任何见解将不胜感激。

只需重申一下，该组件每秒可以处理10条消息，并且我的组件可以像应有的那样更新数据，它最多会崩溃，并且在扩展到100条消息时不会更新。

ReactJs扩展Websocket消息

0 个答案: