时间戳

首页 > 解决方案 > 并行处理的 Reactjs 加载时间

reactjs - 并行处理的 Reactjs 加载时间

问题描述

我们正在使用 ReactJS 开发一个解决方案，基于 excel 用于计算某些值并将它们显示在具有行和列的网格单元格中。每个单元格都有特定的公式，该公式可能取决于其他单元格来计算其值。

E.g.   Cell A = Cell D + Cell Q, 
       Cell D = Cell P + Cell K

等等等等。

随着单元格数量的增加，网格的加载时间呈指数增长。我试图找到一些方法可以通过并行运行来减少加载时间。示例：第一个 x 组单元格可以在一个线程上运行，其他 x 组可以在另一个线程上运行，然后我可以将它们绑定在一起。

或者，如果有任何其他方式我可以做到这一点。

标签： reactjsparallel-processing

解决方案

在浏览器中运行此类算法将极大地限制您的选择。我最初的猜测是在web worker池中运行任务以避免阻塞主线程而不是冻结 UI。

对于技术实现，我建议查看本教程：2018 年开始在 React 中使用 Web Worker 的介绍。

基本示例：

worker.js

export default () => {
    self.addEventListener('message', e => {
        if (!e) return;
        let result;
        // Run your algorithm
        postMessage(result);
    })
}

反应组件

import worker from './worker.js';

componentDidMount = () => {
  this.worker = new WebWorker(worker);
};

onClickAction = () => {
        this.worker.postMessage('Perform actions');
        this.worker.addEventListener('message', event => {
            this.setState({
                results: event.data.results
            })
        });
    }
}

推荐阅读