javascript - Rendering React components with WebWorkers - Stack Overflow

admin管理员组

文章数量:1325380

I saw some stuff online about rendering React ponents with HTML5 WebWorkers..even Pete Hunt the head honcho behind React was talking about it.

I have some CPU intensive work over each element of an array followed by a React render of each element of the array, so I am thinking about putting each of those in a WebWorker and then posting the HTML string back to the main UI thread.

My question is - it looks like React.renderToString is deprecated in favor of ReactDOMServer.renderToString...so I ask all of you and Pete Hunt - are we supposed to use ReactDOMServer on the front-end if we wish to use WebWorkers to render React ponents or is there another remended approach?

(The reason of course, is we can only pass strings / serialized data between threads in JS, so the idea is to render the React ponent to a string, then pass it back to the main UI thread as a string.)

I saw some stuff online about rendering React ponents with HTML5 WebWorkers..even Pete Hunt the head honcho behind React was talking about it.

I have some CPU intensive work over each element of an array followed by a React render of each element of the array, so I am thinking about putting each of those in a WebWorker and then posting the HTML string back to the main UI thread.

My question is - it looks like React.renderToString is deprecated in favor of ReactDOMServer.renderToString...so I ask all of you and Pete Hunt - are we supposed to use ReactDOMServer on the front-end if we wish to use WebWorkers to render React ponents or is there another remended approach?

(The reason of course, is we can only pass strings / serialized data between threads in JS, so the idea is to render the React ponent to a string, then pass it back to the main UI thread as a string.)

• javascript
• html
• reactjs
• web-worker
• web-frontend

Share Improve this question Follow edited Dec 27, 2016 at 23:43 Alexander Mills asked Dec 17, 2015 at 0:46 Alexander MillsAlexander Mills 100k166166 gold badges536536 silver badges914914 bronze badges 6

• Just a quick thought, do you really need to render the ponents in the webworker? Would simply passing the array data back be sufficient if not more efficient? – enjoylife Commented Dec 17, 2015 at 0:57
• well, there's a lot of other work happening before the render, but yeah the render could go either in the webworker or not, but since I am already using the WW, then I thought, might as well do the render in there too while I am at it. for the sake of the question, assume it's necessary / or truly desired :) – Alexander Mills Commented Dec 17, 2015 at 1:05
• Well I would say if it runs on the browser without modification, then why not. It may not be advocated only due to it being such a niche use case. But, hey, if it works and the performance is satisfactory, I would say run with it. – enjoylife Commented Dec 17, 2015 at 1:19
• supposedly the virtual DOM diffing is sort of intensive, so maybe in some cases it's actually more performant, but probably not for most cases since you have send all that data across threads. It does work though using ReactDOMServer, I think. ReactDOMServer code is only abotu 20 lines and seems to be some sort of simple wrapper. – Alexander Mills Commented Dec 17, 2015 at 1:20
• 1 I think ReactDOMServer would perhaps have been better named ReactDOMStatic, but you might also think of your web worker as a type of "server." In short, it's fine to use this in any JS environment where you want to render static HTML from ponents. – Michelle Tilley Commented Dec 17, 2015 at 5:47

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

I wrote up a quick implementation of React, rendering in a Web worker. It is not really a renderToString, but more like a custom renderer. I also found that this is much faster than the normal implementation.

The demo page has 2 applications - an example showing a CPU intensive app, and a simple TODO list with events.

Here are the performance numbers too -http://blog.nparashuram./2016/02/using-webworkers-to-make-react-faster.html

本文标签： javascriptRendering React components with WebWorkersStack Overflow