Was ist der Unterschied zwischen React und Webpack?

Unterschied: 1. React ist ein JavaScript-Framework, während Webpack ein statisches Modulpaket für JavaScript-Anwendungen ist. 2. React wird hauptsächlich zum Erstellen von Benutzeroberflächen verwendet, während Webpack neu geladen und kompiliert werden kann und alle statischen Ressourcen zusammengeführt werden können. Dadurch werden IO-Anfragen reduziert.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was ist React?

React ist ein JavaScript-Framework zum Erstellen von Benutzeroberflächen.

Framework: Code, der wiederverwendet werden kann. Je mehr Menschen es nutzen, desto bekannter wird es und je mehr Menschen es nutzen, desto wertvoller ist es. (lacht)

Angular ist genauso berühmt wie React.

React ist eine JS-Bibliothek zum Rendern von Benutzeroberflächen, die für die Implementierung von Benutzeroberflächen positioniert ist

Effizient: Verwenden Sie VDOM, um die DOM-Interaktion zu reduzieren.

Flexibel: Arbeiten Sie perfekt mit bekannten Bibliotheken oder Frameworks zusammen

Komponenten: Code-Wiederverwendung
Einseitiger Antwortdatenfluss: einfacher und schneller als bidirektionale Bindung.
• Warum React verwenden?

Traditionelle Methoden betreiben häufig DOM und die Leistung kann die Anforderungen nicht erfüllen; React verwendet VDOM, das eine hohe Leistung aufweist.

• Traditionelle JS-Code-Wartungskosten sind hoch und React basiert auf Komponenten Entwicklung: Muss die mobile Entwicklung unterstützen: Die Weltanschauung orientiert sich an Programmiersprachen

• Vue.js Es legt Wert auf die automatische Synchronisierung von Ansichten und seine Weltanschauung orientiert sich an UI-Skripten

• Die Lernkosten von React sind höher als die von Vue.js .

React hat keinen Familien-Bucket, sondern nur eine Benutzeroberfläche.

Was ist Webpack? Wenn Webpack eine Anwendung verarbeitet, erstellt es rekursiv ein Abhängigkeitsdiagramm, das alle Module enthält, die die Anwendung benötigt, und packt dann alle diese Module in ein oder mehrere Bundles.

Webpack ist wie eine Produktionslinie. Es muss eine Reihe von Verarbeitungsprozessen durchlaufen, bevor die Quelldateien in Ausgabeergebnisse umgewandelt werden können. Jeder Verarbeitungsprozess in dieser Produktionslinie hat eine einzige Verantwortung und es bestehen Abhängigkeiten zwischen mehreren Prozessen. Erst nachdem die aktuelle Verarbeitung abgeschlossen ist, kann sie zur Verarbeitung an den nächsten Prozess übergeben werden. Ein Plug-In ist wie eine in die Produktionslinie eingefügte Funktion, die zu einem bestimmten Zeitpunkt Ressourcen in der Produktionslinie verarbeitet.

webpack nutzt Tapable, um diese komplexe Produktionslinie zu organisieren. Webpack sendet Ereignisse während des laufenden Prozesses. Das Plug-in muss nur die Ereignisse abhören, die es interessiert, und kann sich der Produktionslinie anschließen, um den Betrieb der Produktionslinie zu ändern. Der Ereignisflussmechanismus von Webpack gewährleistet die Ordnung der Plug-Ins und macht das gesamte System sehr skalierbar.

• Der laufende Prozess von Webpack ist ein serieller Prozess. Der folgende Prozess wird von Anfang bis Ende ausgeführt:

• Initialisierungsparameter: Parameter aus Konfigurationsdateien und Shell-Anweisungen lesen und zusammenführen, Get the endgültige Parameter.

• Kompilierung starten: Initialisieren Sie das Compiler-Objekt mit den im vorherigen Schritt erhaltenen Parametern, laden Sie alle konfigurierten Plug-Ins und führen Sie die Ausführungsmethode des Objekts aus, um die Kompilierung zu starten.

• Eintrag ermitteln: Finden Sie alle Eintragsdateien anhand des Eintrags in der Konfiguration.

• Kompilieren Sie das Modul: Rufen Sie ausgehend von der Eintragsdatei alle konfigurierten Loader auf, um das Modul zu übersetzen, ermitteln Sie dann die Module, von denen das Modul abhängt, und wiederholen Sie dann diesen Schritt, bis alle eintragsabhängigen Dateien dadurch verarbeitet wurden Schritt.

Vollständige Modulkompilierung: Nachdem Sie Loader in Schritt 4 zum Übersetzen aller Module verwendet haben, werden der endgültige übersetzte Inhalt jedes Moduls und die Abhängigkeiten zwischen ihnen erhalten. Ausgaberessourcen: Montieren Sie sie entsprechend der Abhängigkeitsbeziehung zwischen dem Eintrag und dem Modul in Blöcke, die mehrere Module enthalten, und konvertieren Sie dann jeden Block in eine separate Datei und fügen Sie sie der Ausgabeliste hinzu Ausgabe Letzte Chance für Inhalte.

Ausgabe abgeschlossen: Nachdem Sie den Ausgabeinhalt bestimmt haben, bestimmen Sie den Ausgabepfad und den Dateinamen gemäß der Konfiguration und schreiben Sie den Dateiinhalt in das Dateisystem.

Im oben genannten Prozess sendet Webpack bestimmte Ereignisse zu bestimmten Zeitpunkten. Das Plug-in führt nach dem Abhören der interessierenden Ereignisse eine bestimmte Logik aus und das Plug-in kann die von Webpack bereitgestellte API aufrufen, um Änderungen vorzunehmen die laufenden Ergebnisse von Webpack.

Der Unterschied zwischen React und Webpack

React ist ein JavaScript-Framework, eine JS-Bibliothek zum Rendern von Benutzeroberflächen, die zum Erstellen von Benutzeroberflächen verwendet wird.

• Webpack ist ein Bundler, der mehrere JS-Dateien in eine Datei packen kann (tatsächlich kann er nicht nur JS-Dateien, sondern auch andere Dateitypen wie CSS-Dateien, JSON-Dateien usw. packen).

  Die Rolle von Webpack

  • besteht darin, neu zu laden und zu kompilieren. Was es tatsächlich tut, ist, Syntax, die der Browser nicht erkennt, in Syntax zu kompilieren, die der Browser erkennt. Beispielsweise wird weniger in CSS kompiliert, die ES6-Syntax wird in ES5 konvertiert usw.

  • IO-Anfragen reduzieren. Normalerweise senden wir nach einer Anfrage eine HTML-Datei an den Browser zurück. Wenn wir zu diesem Zeitpunkt die Konsole öffnen, finden wir die statischen Ressourcen, auf die über Skript-, Link- und andere Tags auf der HTML-Seite verwiesen wird, und der Browser stellt eine weitere Anfrage, um diese Ressourcen abzurufen. Die Verpackung des Webpacks führt jedoch alle statischen Ressourcen zusammen und reduziert IO-Anfragen.

  【Verwandte Empfehlungen: Redis-Video-Tutorial】

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen React und Webpack?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!