Was ist der Unterschied zwischen Redux und React?

Die Unterschiede zwischen Redux und React sind: 1. Redux ist ein JavaScript-Statuscontainer, während React eine von Facebook gestartete JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen ist. 2. Redux bietet hauptsächlich Statusverwaltung, während React hauptsächlich zum Erstellen von Benutzeroberflächen verwendet wird. usw. warten.

Die Betriebsumgebung dieses Tutorials: Windows7-System, React17-Version, DELL G3-Computer. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: „Javascript-Grundlagen-Tutorial“

Unterschied

redux

redux ist ein JavaScript-Statuscontainer, der hauptsächlich die Statusverwaltung bereitstellt. Kann auf Server-, Client- und nativen Anwendungen ausgeführt werden. Es unterstützt nicht nur React, sondern auch andere UI-Frameworks und ist mit nur 2 KB klein. Wenn Sie es mit React verwenden, können Sie das React-Redux-Plug-In verwenden, um unsere Entwicklungserfahrung weiter zu verbessern.

Sie können die Daten in diesem Container ändern, indem Sie die entsprechende API aufrufen oder den entsprechenden Mechanismus verwenden. Andere Komponenten können neu rendern, indem sie aktiv neue Daten aus dem Container abrufen.

Darüber hinaus muss dieser Container auch den Veröffentlichungs- und Abonnementmechanismus unterstützen, d. h. wenn sich bestimmte Daten ändern, werden die Komponenten, die sich um die Daten kümmern, sofort benachrichtigt.

react

react ist eine von Facebook gestartete JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. React wird hauptsächlich zum Erstellen einer Benutzeroberfläche verwendet. Viele Leute denken, dass React das V (Ansicht) in MVC ist. React hat eine hohe Leistung und eine sehr einfache Codelogik. Immer mehr Menschen achten darauf und nutzen es.

React ist eine Open-Source-JavaScript-Bibliothek, die HTML-Ansichten für Daten bereitstellt. React-Ansichten werden normalerweise mithilfe von Komponenten gerendert, die andere in benutzerdefinierten HTML-Tags angegebene Komponenten enthalten. React bietet Programmierern ein Modell, bei dem untergeordnete Komponenten keinen direkten Einfluss auf äußere Komponenten haben, effiziente Aktualisierungen von HTML-Dokumenten bei Datenänderungen und eine saubere Trennung zwischen Komponenten in modernen Single-Page-Anwendungen.

Lernen Sie, Ihre eigenen Gedanken zu nutzen, um React und Redux zu verstehen. Sie können nicht einfach zuhören, wie andere die Substantive beschreiben, da es sehr schwierig ist, sie zu verstehen.

Beginnen Sie mit den Anforderungen und sehen Sie, was für die Verwendung von React erforderlich ist:

1 React verfügt über Requisiten und Status: Props bedeutet Eigenschaften, die von der übergeordneten Komponente verteilt werden, State bedeutet den Status, der von der Komponente intern verwaltet werden kann, und die Das gesamte React funktioniert nicht. Die Möglichkeit, Daten nach oben zu verfolgen, bedeutet, dass Daten nur in eine Richtung nach unten verteilt oder intern von selbst verarbeitet werden können.

Das zu verstehen ist die Voraussetzung für das Verständnis von React und Redux.

2. Eine allgemein erstellte React-Komponente enthält möglicherweise eine vollständige Anwendung, die eigenständig gut funktioniert, und Sie können sie über Eigenschaften als API steuern. Häufiger stellt sich jedoch heraus, dass React nicht zulassen kann, dass zwei Komponenten miteinander kommunizieren und die Daten des jeweils anderen nutzen.

Die derzeit einzige Lösung ohne Kommunikation über DOM (also innerhalb des React-Systems) besteht darin, den Zustand zu verbessern, den Zustand zur Verwaltung in eine gemeinsam genutzte übergeordnete Komponente zu legen und ihn dann als Requisiten an die untergeordnete Komponente zurückzuverteilen.

3. Die einzige Möglichkeit für eine untergeordnete Komponente, den Status der übergeordneten Komponente zu ändern, besteht darin, den von der übergeordneten Komponente über onClick deklarierten Rückruf auszulösen. Das heißt, die übergeordnete Komponente deklariert eine Funktion oder Methode im Voraus als zu beschreibenden Vertrag wie sich sein Zustand ändert, und verwendet ihn dann als denselben. Die Eigenschaften werden zur Verwendung an untergeordnete Komponenten übergeben.

Es entsteht ein Muster: Daten werden immer in eine Richtung von oben nach unten verteilt, aber nur Rückrufe von Unterkomponenten können konzeptionell in den oberen Zustand zurückkehren, um Daten zu beeinflussen. Auf diese Weise reagiert der Staat in gewissem Maße.

4. Um allen möglichen Erweiterungsproblemen zu begegnen, ist es am einfachsten, alle Zustände auf der obersten Ebene aller Komponenten zu platzieren und sie dann auf alle Komponenten zu verteilen.

5. Um eine bessere Zustandsverwaltung zu erreichen, ist eine Bibliothek erforderlich, um sie als professionelleren Zustand auf oberster Ebene zu verteilen. Schauen wir uns noch einmal die Anforderungen für die Reproduktion der obigen Struktur an:

benötigt Rückrufbenachrichtigungsstatus (entspricht Rückrufparametern) –> Aktion

muss gemäß Rückrufen verarbeitet werden (entspricht der übergeordneten Methode) –>

benötigt Status (entspricht dem Gesamtstatus) -> Store

hat nur diese drei Elemente für Redux:

Aktion ist eine rein deklarative Datenstruktur, die nur alle Elemente des Ereignisses und keine Logik bereitstellt.

Reducer ist eine Matching-Funktion und das Senden von Aktionen ist global: Alle Reducer können erfassen und abgleichen, ob sie relevant sind oder nicht. Wenn sie relevant sind, entfernen sie die Elemente in der Aktion zur logischen Verarbeitung und ändern den Status Wenn sie nicht relevant sind, wird der Status unverändert zurückgegeben, ohne dass er verarbeitet wird.

Store ist für das Speichern des Status verantwortlich und kann über die Reaktions-API und Veröffentlichungsaktionen zurückgerufen werden.

Natürlich werden die beiden Bibliotheken im Allgemeinen nicht direkt verwendet. Es gibt auch eine Bindung namens React-Redux, die einen Anbieter und eine Verbindung bereitstellt . Viele Leute verstehen tatsächlich, dass Redux hier feststeckt.

Provider ist eine gemeinsame Komponente, die als Verteilungspunkt der Top-Level-App verwendet werden kann. Sie erfordert nur das Store-Attribut. Es verteilt den Status an alle verbundenen Komponenten, unabhängig davon, wo sie sich befinden oder auf wie vielen Ebenen sie verschachtelt sind.

connect ist der eigentliche Punkt. Es handelt sich um eine Curry-Funktion, das heißt, sie akzeptiert zunächst zwei Parameter (Datenbindung „mapStateToProps“ und Ereignisbindung „mapDispatchToProps“) und dann einen Parameter (die zu bindende Komponente selbst):

mapStateToProps: Wenn Sie das Redux-System erstellen, wird es automatisch initialisiert, aber Ihre React-Komponente kennt seine Existenz nicht. Daher müssen Sie den benötigten Redux-Status ermitteln und eine Funktion binden. Der Parameter ist state, der einfach ein paar Werte zurückgibt, die Ihnen wichtig sind.

mapDispatchToProps: Die deklarierte Aktion dient als Rückruf und kann über diese Funktion injiziert werden. Über die Redux-Hilfsmethode bindActionCreator werden alle Aktionen und Dispatch-Parameter gebunden als Attribute in Es wird einfach als Funktion in der Komponente verwendet und erfordert keinen manuellen Versand. Dieses „mapDispatchToProps“ ist optional. Wenn Sie diesen Parameter nicht übergeben, fügt Redux einfach „dispatch“ als Attribut in die Komponente ein, das manuell als „store.dispatch“ verwendet werden kann.

Das ist auch der Grund, warum es geheilt werden muss.

Nach Abschluss des oben genannten Prozesses sind Redux und React einsatzbereit.

Einfach ausgedrückt:

1. Verteilungsstatus der obersten Ebene, der es React-Komponenten ermöglicht, passiv zu rendern.

2. Achten Sie auf Ereignisse, und Ereignisse haben das Recht, auf die oberste Ebene aller Staaten zurückzukehren und den Staat zu beeinflussen.

Zusammenfassung:

React benötigt einen Manager, der den Zustand verwaltet. Redux fungiert als diese Rolle, um den Zustand der obersten Ebene zu verteilen und das Rendering von Reaktionskomponenten zu ändern.

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