Kann ich React-Komponenten bearbeiten, ohne den Browser neu zu laden?

Question

Wenn React DOM-Abgleich bietet, ist es möglich, Code der Komponente dynamisch neu zu laden und erneut zu rendern, nachdem ich es bearbeitet habe?

Ich bin auf der Suche nach einer Lösung, die es mir erlaubt, JSX-Datei zu bearbeiten, zu speichern und die Komponente selbst im Browser aktualisieren, ohne die Seite neu zu laden, unmounten oder den Status zu verlieren.

Idealerweise sollte dies ohne Browser-Plugins funktionieren.

Answer 1

können Sie react-hot-loader, ein Drop-in Webpack Loader verwenden, die für React Komponenten in Ihren Projekten Live-Bearbeitung ermöglicht. Keine Browser-Plugins oder IDE-Hooks erforderlich.

Es heiratet Webpack Hot Module Replacement (HMR) mit React.

können Sie diese verwenden, wenn:

• Ihre Komponenten reagieren dont haben unangenehme Nebenwirkungen;
• Sie können zu Webpack für Module wechseln (es ist nicht schwer zu wechseln, see the walkthrough);
• Sie haben ein paar Stunden (Minuten, wenn Sie bereits Webpack verwenden).

Wie es funktioniert:

• Es verwendet Webpack HMR API über das „Modul-Update“ Ereignis zu lernen.
• Es ändert Anrufe zu speziellen createClass und updateClass Funktionen, die store the component's prototype and later update it with fresh version;
• Wenn alle Prototypen aktualisiert sind, ruft sie forceUpdate auf, um die Komponenten erneut zu rendern.

Es gibt eine demo video, ein explanatory blog post und ein React tutorial app fork with live-edit configured.

Und es ist alles Vanille JS.

Answer 2

Sie können, und ich erstellte ein Beispielprojekt, das zeigt, wie man diese Einrichtungen für sich selbst mit ES5 und RequireJS erstellt - es funktioniert mit React und auch mit Backbone - es könnte wahrscheinlich mit Angular und Ember usw. arbeiten, solange Sie verwenden AMD-Module und RequireJS.

Hier alle Informationen: https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1

die grundlegenden Schritte sind:

1. gulp.js Beobachter hört für Dateisystem ändert

2. Buchse.io-Server in gulpfile sendet an alle Browser-Clients mit dem Pfad der Datei, eine Nachricht, die

3. Client löscht Cache darstellt, dass die Datei/Modul geändert und Wieder erfordert (AJAX sie vom Server-Dateisystem zu ziehen)

4. Front-End-Anwendung konfiguriert ist/entworfen, um neu bewerten alle Verweise auf die Module, die es zu Hot-reload wünscht, in diesem Fall nur Ansichten JS, Vorlagen und CSS sind zur Verfügung zu heißen reload - die Router, Controller, Datenspeicher sind noch nicht konfiguriert. Ich vermute, dass alle Dateien heiß geladen werden können, mit der einzigen Ausnahme, die Datenspeicher sind.

Sie können ein Beispielprojekt hier sehen: https://github.com/ORESoftware/hr4R

aber ich empfehle den Artikel oben erster Lesung.

Dies ist eine einfachere DIY-Implementierung von Hot-Reload als mit Babel/ES6 und React-Hot-Loader.

Webpack war nicht in erster Linie für das Hot-Reload gedacht - wenn das der Fall wäre, wäre das Hot-Reload kein experimentelles Feature mehr, und es würde auch nicht das Abfragen von Dateisystem-Diffs verwenden (siehe meinen Artikel).

Die RequireJS/AMD-Spezifikation war im Grunde gemacht für Hot-Reload, wenn Sie darüber nachdenken.