使用 ReactJS 显示数据的最快方法

Question

我正在尝试使用 Electron 和 ReactJS 为自己创建一个泥（多用户地牢）客户端，用于学习和挑战自己。但似乎我在这次挑战中失败了。

我正在使用 telnet-stream 从服务器获取数据。

来自服务器的数据具有 ansi 代码，因为它是基于 telnet 的通信。

问题在于速度。我不确定我是否做得对，但这里是负责显示数据的组件：

import React, { Component } from 'react';
import styles from './style.css';

type Props = {
  output: Array<any>
};

export default class ActionWindow extends Component<Props> {
  props: Props;

  componentDidMount() {
    this.scrollToBottom();
  }

  componentDidUpdate() {
    this.scrollToBottom();
  }

  scrollToBottom() {
    this.el.scrollIntoView({ behavior: 'smooth' });
  }

  render() {
    const output = this.props.output.map(chunk => chunk
        .replace('&', '&amp;')
        .replace('<', '&lt;')
        .replace('>', '&gt')
        .replace(/\x1b\[(\d+);(\d+);?(\d+)?m/g, '</span><span class="c-$1 c-$2 x-$3">')
    );
    return (
      <div className={styles.actionWindowWrapper}>
        <span dangerouslySetInnerHTML={{ __html: output }} />
        <div ref={el => { this.el = el; }} />
      </div>
    );
  }
}

这是正确的方法，还是有更快的方法？数据通过 props 来自主 App 组件。

Answer 1

为什么要使用“dangerouslySetInnerHTML”？因为您将输出映射到 html 元素，所以您可以编写：

render() {

return (
  <div className={styles.actionWindowWrapper}>
    this.props.output.map(chunk => chunk
    .replace('&', '&amp;')
    .replace('<', '&lt;')
    .replace('>', '&gt')
    .replace(/\x1b\[(\d+);(\d+);?(\d+)?m/g, '<span></span class="c-$1 c-$2 x-$3">')
    <div ref={el => { this.el = el; }} />
  </div>
);

}

我不完全理解你的正则表达式 '.replace(/\x1b[(\d+);(\d+);?(\d+)?m/g, '')' 我不认为由于结束标记而输出正确的 html