2015-12-17 27 views
5

Ho visto alcune cose online sul rendering dei componenti React con HTML5 WebWorkers..evunque Pete Hunt era il capo di React che ne parlava.Rendering Reagire i componenti con WebWorkers

Ho un po 'di lavoro intensivo della CPU su ogni elemento di un array seguito da un rendering React di ciascun elemento dell'array, quindi sto pensando di inserire ciascuno di quelli in un WebWorker e quindi di postare la stringa HTML sul main Thread dell'interfaccia utente.

La mia domanda è - sembra React.renderToString è deprecato in favore di ReactDOMServer.renderToString ... quindi chiedo a tutti voi e Pete Hunt - dovremmo usare ReactDOMServer sul front-end, se vogliamo usare per rendere WebWorkers Reagisci componenti o c'è un altro approccio raccomandato?

(La ragione, ovviamente, è che possiamo passare solo stringhe/dati serializzati tra i thread in JS, quindi l'idea è di rendere il componente React su una stringa, quindi passarlo nuovamente al thread dell'interfaccia utente principale come stringa.)

+0

Solo un pensiero rapido, non si ha realmente bisogno di rendere i componenti del WebWorker? Basterebbe semplicemente il passaggio dei dati dell'array essere sufficiente se non più efficiente? – enjoylife

+0

beh, ci sono un sacco di altri lavori in corso prima del rendering, ma sì il rendering potrebbe andare nel webworker o no, ma dal momento che sto già usando il WW, quindi ho pensato, potrebbe anche fare il rendering anche lì Ci sono. per il gusto della domanda, supponiamo sia necessario/o veramente desiderato :) –

+0

Beh, direi che se viene eseguito sul browser senza modifiche, allora perché no. Non può essere sostenuto solo perché è un caso di utilizzo di nicchia. Ma, hey, se funziona e la performance è soddisfacente, direi che corro con esso. – enjoylife

risposta

3

Ho scritto una rapida implementazione di React, rendering in un Web worker. Non è davvero un renderToString, ma più simile a un renderizzatore personalizzato. Ho anche scoperto che questo è molto più veloce della normale implementazione.

La pagina demo ha 2 applicazioni: un esempio che mostra un'app intensiva della CPU e una semplice lista TODO con eventi.

Ecco i numeri di prestazioni troppo - http://blog.nparashuram.com/2016/02/using-webworkers-to-make-react-faster.html

Problemi correlati