2015-12-17 2 views
5

Я видел некоторые вещи в Интернете об рендеринге Реагировать на компоненты с HTML5 WebWorkers. Даже Пит Хант возглавлял хонхо позади Реакта.Рендеринг реактивных компонентов с помощью WebWorkers

У меня есть интенсивная работа с ЦП над каждым элементом массива, за которым следует рендеринг React каждого элемента массива, поэтому я думаю о том, чтобы поместить каждую из них в WebWorker, а затем отправить строку HTML обратно в основную Пользовательский интерфейс.

Мой вопрос - это выглядит как React.renderToString осуждается в пользу ReactDOMServer.renderToString ... поэтому я прошу всех вас и Пит Hunt - мы должны использовать ReactDOMServer на переднем конце, если мы хотим использовать WebWorkers для визуализации Реагировать на компоненты или есть другой рекомендуемый подход?

(Разумеется, мы можем передавать только строки/сериализованные данные между потоками в JS, поэтому идея состоит в том, чтобы отобразить компонент React в строке, а затем передать его в основной поток пользовательского интерфейса в виде строки.)

+0

Просто быстро мысль, сделать вам действительно нужно, чтобы сделать компоненты в WebWorker? Будет ли просто передавать данные массива достаточным, если не более эффективным? – enjoylife

+0

хорошо, есть много другой работы, которая происходит перед рендером, но да, рендер может пойти либо в webworker, либо нет, но, поскольку я уже использую WW, я подумал, может также сделать рендер там, пока Я нахожусь в этом. ради вопроса, предположим, что это необходимо/или действительно желательно :) –

+0

Ну, я бы сказал, если он работает в браузере без изменений, то почему бы и нет. Он не может быть защищен только из-за того, что это такой случай использования в нише. Но, эй, если это сработает, и производительность будет удовлетворительной, я бы сказал, беги с ней. – enjoylife

ответ

3

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

Демо-страница имеет 2 приложения - пример, демонстрирующий приложение с интенсивным использованием процессора, и простой список TODO с событиями.

Вот показатели производительности тоже - http://blog.nparashuram.com/2016/02/using-webworkers-to-make-react-faster.html