Получить в веб-работника с помощью React - PullRequest
Новая
       12

Получить в веб-работника с помощью React

0 голосов
/ 17 сентября 2018

У меня есть страница React, которая запрашивает у пользователя ввод некоторой информации и возвращает массив объектов JSON из API.

Запрос может вернуть большой результат, приводящий к зависанию страницы при загрузке выборки, поэтому я хотел использовать веб-работника для разделения потоков и добавления колеса загрузки, чтобы пользователь мог знать, что сайт не потерпел крах .

У меня сейчас есть веб-работник с этим кодом:

Рабочий код 

const self = this;

export default () => {
    self.addEventListener('message', e => {
        if (!e) return;
        let query = e.data;
        let res = null;

        fetch(`https://statsapi.web.nhl.com/api/v1/schedule?startDate=${query}&endDate=${query}`)
        .then(response => {
            return response.json();
        })
        .then(function(_ref) {
            postMessage(_ref);
        });
    });
};

Это только пример API, но реальный результат API будет намного больше и займет больше времени для загрузки.

Я также использую function(_ref) вместо ({ data }) =>, потому что при обработке через babel ({ data }) => будет превращаться в _ref.data, когда нет доступа к данным через ref, а _ref работает при возврате массива.

У меня есть код, реализованный в классе веб-работника, например:

Рабочий конструктор 

export default class WebWorker {
    constructor(worker) {
        const code = worker.toString();
        const blob = new Blob(['(' + code + ')()'], { type: 'text/javascript' });
        return new Worker(URL.createObjectURL(blob));
    }
}

Я называю веб-работника из другого класса так:

Создание Web Worker 

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

getInfo = () => {
    this.worker.postMessage(this.state.query);

    this.setState(prevState => ({
        ...prevState,
        open: true
    }), () => {
        this.worker.addEventListener('message', (event) => {
            const res = event.data;
            this.setState({
                results: res,
                open: false
            });
        });
    });
}

Проблема, с которой я столкнулся, заключается в том, что, когда я пытаюсь назвать его так, как я, веб-работник, похоже, не обрабатывает данные в другом потоке. Страница по-прежнему зависает, хотя веб-работник получает данные, так как он по-прежнему правильно устанавливает состояние после замораживания.

Я новичок в веб-работе, поэтому мне не хватает чего-то, что позволило бы ему работать, или был бы другой способ использования веб-работника с выборкой?

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Если ваша страница перестает отвечать на запросы, это показатель того, что на основной поток обработки влияют операции, связанные с ЦП.Связанные с вводом / выводом операции, такие как выборка из URL, не повлияют на скорость отклика вашей страницы, за исключением небольшого количества накладных расходов на анализ ответа.Поэтому лучше всего использовать работников для выполнения ресурсоемких операций в другом потоке.Вы получаете очень мало (если вообще что-то) с точки зрения производительности переноса операций ввода-вывода на рабочих.

Скорее всего, именно ваша логика рендеринга или обработки данных вызывает зависание, а не обработка сетевых запросов.

0 голосов
/ 17 сентября 2018

Сначала нужно определить, в чем проблема. Ответ от API, вероятно, хороший, но если вы делаете «вещи» с десятками тысяч объектов - циклические, сортирующие, отображающие и т. Д. - (или визуализируете тысячи элементов), то производительность вашей страницы, вероятно, значительно снизится.

Что-то простое, как нумерация страниц, может быть ответом на все вопросы.

...