使用WebWorkers呈现React组件

Question

I saw some stuff online about rendering React components 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 components or is there another recommended 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 component to a string, then pass it back to the main UI thread as a string.)

Answer 1

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.com/2016/02/using-webworkers-to-make-react-faster.html