Javascript 如何在react.js中高效处理大型文件

我试图在使用react上传的文件中呈现十六进制值。 当我上传大文件（比如10MB）时，页面崩溃，但像这样的网站工作起来很有魅力。我不明白我做错了什么

下面是执行相同操作的代码

import React from "react";

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.fileReader = null;
    this.state = {
      filecontent: [],
      decodingSection: [
        { type: "BigUint64", startIndex: "0", endIndex: "0" },
        { type: "BigUint64", startIndex: "0", endIndex: "0" }
      ]
    };
  }

  handleFileRead = () => {
    const typedArray = new Uint8Array(this.fileReader.result);
    const untypedArrray = [];
    const iii = typedArray.values();

    while (true) {
      const { value, done } = iii.next();

      if (done) {
        break;
      }

      const hexValue = value.toString(16);

      untypedArrray.push(hexValue.length === 1 ? `0${hexValue}` : hexValue);
    }

    this.setState({
      filecontent: untypedArrray
    });
  };

  handleFileChosen = file => {
    this.fileReader = new FileReader();
    this.fileReader.onloadend = this.handleFileRead;
    this.fileReader.readAsArrayBuffer(file);
  };

  render() {
    return (
      <div>
        <input
          type={"file"}
          id={"file"}
          onChange={e => this.handleFileChosen(e.target.files[0])}
        />
        <br />
        {this.state.filecontent.length > 0 && (
          <div>No Bytes present {this.state.filecontent.length}</div>
        )}
        {this.state.filecontent.map(each => `${each} `)}
      </div>
    );
  }
}

export default App;

---

一个可能的原因可能是render方法中的映射this.state.filecontent.mapeach=>'${each}'，虽然我不确定

我稍微修改了代码，以便它使用数组的连接方法将整个字符序列保存到名为contents的字符串中，然后立即呈现它

---

你可以看看，试试看。至少，它在10Mb的文件上对我有效：

它没有我想要的那么多改进，我使用服务工作者将其与react componentCool分离！您能分享一下它在多大程度上提高了渲染性能吗？