2017-04-06 3 views
0

Ich lerne React und ich benutze es mit create-react-app, die mir erlaubt, Text in einer Datei mit dem Namen App.js zu bearbeiten und als ich alle Änderungen in dieser Datei speichern, die Webseite mit der Adresse http://localhost:3000/ im Browser automatisch aktualisiert ohne neu zu laden. Normalerweise muss ich beim Erstellen von html/plain js-Dateien die Seite neu laden. Wie aktualisiert es sich dynamisch?Wie funktioniert das Warmladen?

+0

webapp erstellt eine Socket-Verbindung und wartet auf Dateiänderungen (überprüfen Sie die Browser-Konsole). Bei jeder Änderung der Entropie lädt es sich neu auf. – marmeladze

+0

Wenn Sie den lokalen Server auf Ihrem Computer ausführen, verwendet er IP '127.0.0.1', auch bekannt als' local loopback'. Normalerweise hat diese IP eine Zuordnung zu 'localhost' in der Host-Datei. Wenn Sie nun Ihren Server ausführen, geben Sie einen Port an, auf dem er sich anhören soll. Daher lautet Ihre URL "http: // localhost: 3000". – Rajesh

+0

Mögliche Duplikate: https://superuser.com/questions/321734/how- does-localhost-127-0-0-1-arbeiten – Rajesh

Antwort

1

gibt es ein Konzept von Hot Reloading. Die Idee hinter dem Warmladen ist es, die App laufen zu lassen und neue Versionen der Dateien, die Sie zur Laufzeit bearbeitet haben, zu injizieren. Es nutzt HMR und ohne die Seite neu zu laden, ersetzt die geänderten Komponenten und behält den Status bei. Das bedeutet, dass Ihre Änderung in ungefähr einer halben Sekunde sichtbar sein wird; Wenn es sich um einen Dialog handelt, müssen Sie ihn nicht erneut öffnen, Ihre Texteingaben bleiben gefüllt usw. Kurz gesagt, es ist ein enormer Gewinn für die iterative Entwicklung, bei der Sie viel weniger Zeit darauf warten, dass Ihre App neu geladen wird. Weitere Informationen finden Sie unter here

1

Der CLI, den Sie verwenden, verwendet Webpack, um dies zu erreichen. Webpack ist ein Modul-Bundler, der aus all Ihren js/ts/jsx/tsx-Dateien eine Bundle-Datei erstellt, die Sie in Ihre index.html-Datei einbetten. Um ein Live-Reload zu erreichen, verwendet webpack webpack-dev-server (ein kleiner node.js-Express-Server)). Sie können Ihr Webpack so konfigurieren, dass es nach Änderungen an Ihrer Datei Ausschau hält, und Webpack aktualisiert Ihre Bundle-Datei, wenn sich Ihr Code ändert. Sie können mehr darüber erfahren, wie es funktioniert here. Alle Konfigurationen für webpack sind in webpack.config file.You geschrieben mehr über webpak lernen können here .Sie können auch diese folgen link

1

Dies ist eigentlich kein eigenständiges Ding.

Dies geschieht, weil reagieren Webpack Dev-Server verwenden, die Paket neu laden, wenn Sie Änderungen vornehmen.

Als ob Sie dasselbe tun möchten, müssen Sie einen lokalen Server einrichten und immer auf demselben Server bearbeiten. browserSync ist auch eine Option, aber Sie müssen nodejs verwenden dann