Reagieren, asynchrones Laden für mehrere Abschnitte/Ansichten mit verschiedenen Komponenten

Question

Ich habe ein Problem mit der Frage, wie man eine React-App mit mehreren Seiten/Ansichten am besten erstellen kann (immer noch ein SAP).

Nehmen wir an, wir haben eine einfache App mit 4 Hauptabschnitten (Seiten): Dashboard, Benutzer, Statistiken, Kommentare. Jeder Abschnitt enthält verschiedene Komponenten (denken Sie reagieren Komponenten). Zum Beispiel würde die Kommentare eine Hierarchie hat, etwa so:

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

in einem Rahmen, wie Winkel würde beispielsweise die 4 Hauptabschnitte aufgeteilt in Partialtöne werden und in einer NG-Ansicht auf Anfrage geladen, mit ihrem entsprechende Komponenten innen. Bei der Landung auf der Startseite würde die App nur die Dashboard-Ansicht laden und wenn der Benutzer auf ein Navigationselement klickt, würde die ausgewählte Route (dh App/Benutzer oder App/Benutzer /: ID) ausgelöst und die App lädt die erforderliche " template-view-partial "(ohne Aktualisierung des Browsers).

Jetzt in Bezug auf React, wie würde dies auftreten? Es scheint so, als ob ALLE Views und ALLE ihre Komponenten in einer browserbasierten JS-Datei verfügbar sein müssten und die App dann das DOM aktualisieren kann.

Das scheint schrecklich falsch, da wir alle Abschnitte in der ersten laden würden, auch wenn der Benutzer nie zu diesem Abschnitt gelangen muss. Zugegeben, wir könnten es mit Routen auf dem Server teilen und nur die Komponenten für die Seite basierend auf der Route bereitstellen, aber das würde eine Aktualisierung des Browsers erfordern, wo dies beispielsweise in Angular ohne eine Browseraktualisierung als Ansicht geschehen würde wird asynchron geladen.

Die Frage ist, wie kann dieses asynchrone Laden in einer React-basierten App geschehen?

Answer 1

Ich denke, es gibt ein paar verschiedene Wege, dieses Problem anzugehen, ich erkläre den Ansatz, den ich derzeit für meine Arbeit und Nebenprojekte verwende.

Anstelle von browserify verwenden wir einen Modul-Bundler namens webpack (https://github.com/webpack/webpack). Das Tolle an Webpack ist, dass es wie Browserify ist, aber Ihre App in mehrere "Bundles" aufteilen kann. Das ist großartig, denn wenn wir mehrere Komponenten/Ansichten haben, lädt der Benutzer einfach die Funktionen herunter, die er für diese bestimmte Ansicht benötigt, ohne alles zuerst herunterladen zu müssen. Es ermöglicht, dass reaktive Komponenten und deren Abhängigkeiten bei Bedarf heruntergeladen werden können.

Pete Hunt schrieb einen Artikel über die Vorteile von Webpack, wenn es mit React verwendet wird (einschließlich Async-Load-React-Komponenten) und wie es ähnlich zu Browserify und modernen Build-Tools wie Grunt/Gulp ist : http://blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/

Im Wesentlichen: https://github.com/petehunt/webpack-howto

Answer 2

I webpack hier eine Lösung unter Verwendung beschrieben haben

1. Verwendung require.ensure([], cbk) definieren Code Brocken; Laden Sie Ihre Pakete im cbk synchron unter Verwendung von require()
2. in Ihre Hostkomponente, laden Sie Ihre asynchrone Komponente in componentWillMount(), und setzen Sie sie in den Hostkomponentenstatus.
3. es in der Host-Komponente machen verwenden, wenn sie auf den Staat