Время загрузки Reactjs с параллельной обработкой

Question

Мы разрабатываем решение для ReactJS, основанное на Excel, для расчета определенных значений и отображения их в ячейке сетки, содержащей строки и столбцы. Каждая ячейка имеет определенную формулу, которая может зависеть от других ячеек для вычисления ее значения.

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

И т. Д. И т. П.

Поскольку количество ячеек увеличивается, загрузкавремя сетки увеличивается экспоненциально. Я пытаюсь найти способы, которыми я могу сократить время загрузки, запуская вещи параллельно. Пример: первый набор ячеек x может выполняться в одном потоке, а другой набор x может выполняться в другом потоке, а затем я могу связать это вместе.

Или, если есть какой-либо другой способ, которым я могу это сделать.

Answer 1

Запуск такого алгоритма в браузере сильно ограничит ваши возможности. Моим первоначальным предположением было бы запускать задачи в пуле веб-работника , чтобы избежать блокировки основного потока и не заморозить пользовательский интерфейс.

Для технической реализации я бы рекомендовал взглянуть на этоучебное пособие: Введение в использование Web Workers в React с 2018.

Базовый пример:

worker.js

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

React component

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
            })
        });
    }
}