Reagire, caricamento asincrono per più sezioni/viste con diversi componenti

Question

Ho un problema a pensare al modo migliore di progettare un'app React con più pagine/viste (ancora un SAP).

Diciamo che abbiamo una semplice app con 4 sezioni principali (pagine): dashboard, utenti, statistiche, commenti. Ogni sezione contiene componenti diversi (pensa a reagire componenti). Ad esempio, la sezione commenti avrebbe una gerarchia modo:

CommentsSection 
- CommentsQueue 
-- Comment 
--- Text 
--- Buttons 
- CommentsApproved 
--Comment 
--- Text 
--- Buttons 

In un quadro come angolare per esempio, 4 sezioni principali sarebbero raggruppati in parziali, e caricato in un ng-vista disponibili su richiesta, con il loro rispettivi componenti all'interno. Quando si atterra sulla homepage, l'app carica solo la visualizzazione del dashboard e quando l'utente fa clic su un elemento di navigazione, il percorso selezionato (app/utenti o app/utenti /: id) viene attivato e l'app carica il necessario " template-view-partial "(senza aggiornamento del browser).

Ora in termini di React, come si verificherà? sembra che TUTTE le visualizzazioni e TUTTI i loro componenti debbano essere disponibili in un file JS browserizzato e che l'app possa aggiornare il DOM.

Questo sembra terribilmente sbagliato, poiché dovremmo caricare tutte le sezioni nel primo caricamento, anche se l'utente non ha mai bisogno di accedere a quella sezione. Certo, potremmo dividerlo con le rotte sul server e servire solo i componenti per la pagina in base alla rotta, ma ciò richiederebbe un aggiornamento del browser, dove, come in Angular, ad esempio, accadrebbe senza un aggiornamento del browser come vista viene caricato in modo asincrono.

La domanda è: in che modo questo caricamento asincrono può verificarsi in un'app basata su React?

Answer 1

Penso che ci siano diversi modi per avvicinarsi a questo, spiegherò l'approccio che sto attualmente utilizzando per il mio lavoro e i progetti collaterali.

Invece di usare browserify, usiamo un modulo-bundler chiamato webpack (https://github.com/webpack/webpack). La cosa fantastica del webpack è che è come Browserify, ma può dividere la tua app in più "pacchetti". Questo è ottimo perché se disponiamo di più componenti/viste, l'utente semplicemente scaricherà le funzionalità di cui ha bisogno per quella particolare vista senza dover scaricare tutto inizialmente. Permette di scaricare componenti on-demand e le loro dipendenze su richiesta.

Pete Hunt ha scritto un articolo che va in profondità sui vantaggi di webpack quando lo si utilizza con React (incluso come ASYNC carico reagire componenti), e come è simile/diverso da Browserify e moderni strumenti di compilazione, come Grunt/Gulp : https://github.com/petehunt/webpack-howto

Answer 2

ho descritto una soluzione con webpack qui: http://blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/

In sostanza:

1. uso require.ensure([], cbk) per definire pezzi di codice; nel cbk, caricare i pacchetti in modo sincrono utilizzando require()
2. nel componente host, caricare il componente asincrono in componentWillMount() e impostare nello stato del componente host.
3. utilizzarlo nel componente di accoglienza di rendering, quando ha definito sullo stato