Untersuchung der drei zugrunde liegenden Mechanismen der globalen Statusverwaltung von React

Vorwort

Moderne Frontend-Frameworks entwickeln Seiten alle komponentenbasiert. Teilen Sie die Seite entsprechend der logischen Beziehung in verschiedene Komponenten auf, entwickeln Sie verschiedene Komponenten separat und setzen Sie sie dann Schicht für Schicht zusammen. Übergeben Sie die Stammkomponente an ReactDOM.render oder die $mount-Methode von Vue, und der gesamte Komponentenbaum wird durchlaufen und in das entsprechende DOM gerendert.

Komponenten unterstützen die Übergabe einiger Parameter zur Anpassung und können auch einige interaktive Zustände intern speichern. Nach der Änderung der Parameter und Zustände wird der entsprechende Teil des DOM automatisch erneut gerendert.

Obwohl sie logisch in verschiedene Komponenten aufgeteilt sind, sind sie alle unterschiedliche Teile derselben Anwendung und müssen zwangsläufig miteinander kommunizieren und kooperieren. Wenn Komponenten in mehr als einer Schicht über Parameter kommunizieren, müssen die Komponenten in der mittleren Schicht diese Parameter transparent weitergeben. Parameter werden ursprünglich zum Anpassen von Komponenten verwendet, und für die Kommunikation sollten keine bedeutungslosen Parameter hinzugefügt werden.

Daher erfolgt die Komponentenkommunikation im Allgemeinen nicht durch die schichtweise Übertragung der Komponentenparameter, sondern durch deren Platzierung an einem globalen Ort, von dem aus beide Parteien auf sie zugreifen.

Es mag viele spezifische Lösungen für die globale Statusverwaltung geben, aber die ihnen zugrunde liegenden Mechanismen sind nicht mehr als drei: Eigenschaften, Kontext und Status.

Als Nächstes wollen wir untersuchen, wie diese drei Methoden globale Zustände speichern und übertragen.

Requisiten

Wir können über ein globales Objekt kommunizieren, bei dem eine Komponente Daten speichert und die andere Komponente sie abruft.

Das Schreiben von Code in Komponenten zum Abrufen von Daten aus dem Store ist ziemlich aufdringlich. Sie können diesen Code nicht zu jeder Komponente hinzufügen, die den Store verwendet. Wir können diese Logik in eine Komponente höherer Ordnung extrahieren und sie zum Verbinden von Komponenten und Speichern verwenden. Daten werden über Parameter in Komponenten eingespeist, sodass die Quelle für die Komponenten transparent ist.

Dies ist, was react-redux macht:

importiere { connect } von „react-redux“;

Funktion mapStateToProps(Zustand) {
    return { todos: status.todos }
}
  
Funktion mapDispatchToProps(Versand) {
    returniere bindActionCreators({ addTodo }, dispatch)
}
  
Standardverbindung exportieren(mapStateToProps, mapDispatchToProps)(TodoApp)

Darüber hinaus bietet Redux auch einen Middleware-Mechanismus, der die von der Komponente an den Store gesendete Aktion abfangen kann, um eine Reihe asynchroner Logik auszuführen.

Zu den bekannteren Middlewares gehören Redux-Thunk, Redux-Saga und Redux-Obervable, die unterschiedliche Möglichkeiten zum Schreiben und Organisieren asynchroner Prozesse sowie zum Kapseln und Wiederverwenden asynchroner Logik unterstützen.

Ähnliche Bibliotheken zur globalen Statusverwaltung, wie etwa Mobox, Reconcil usw., fügen den Komponenten über Props ebenfalls einen globalen Status hinzu.

Kontext

Benötigt die schichtübergreifende Komponentenkommunikation eine Drittanbieterlösung? Nein, React selbst bietet auch einen Kontextmechanismus für diese Art der Kommunikation.

Die API von React.createContext gibt Provider und Consumer zurück, die zum Bereitstellen bzw. Abrufen von Status verwendet und auch transparent über Props an die Zielkomponente übergeben werden. (Der Consumer kann hier auch durch die useContext-API ersetzt werden, was denselben Effekt hat. Klassenkomponenten verwenden Provider und Funktionskomponenten verwenden useContext.)

Es sieht so aus, als gäbe es grundsätzlich keinen Unterschied zur Redux-Lösung. Der Hauptunterschied besteht jedoch darin, dass der Kontext keine Middleware zur Ausführung asynchroner Logik hat.

Daher eignet sich die Kontextlösung für die globale Datenkommunikation ohne asynchrone Logik, während Redux für die Organisation komplexer asynchroner Logik geeignet ist.

Der Fallcode lautet wie folgt:

const Themen = {
  Licht:
    Vordergrund: "#000000",
    Hintergrund: "#eeeeee"
  },
  dunkel:
    Vordergrund: "#ffffff",
    Hintergrund: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

Funktion App() {
  zurückkehren (
    <ThemeContext.Provider-Wert={themes.dark}>
      <Symbolleiste />
    </ThemeContext.Provider>
  );
}

Funktion Symbolleiste (Eigenschaften) {
  zurückkehren (
    <div>
      <ThemedButton />
    </div>
  );
}

Funktion ThemedButton() {
  const theme = useContext(ThemeContext);
  zurückkehren (
    <Schaltflächenstil={{ Hintergrund: Thema.Hintergrund, Farbe: Thema.Vordergrund }}>
      Ich werde nach Themenkontext gestylt!
    </button>
  );
}

Ich frage mich, ob Sie jemals darüber nachgedacht haben: Es ist normal, Komponenten erneut zu rendern, wenn sich Eigenschaften und Status ändern, aber wie löst eine Kontextänderung das Rendering aus?

Tatsächlich hat React intern einige Verarbeitungsvorgänge durchgeführt. Wenn der Kontextwert geändert wird, durchläuft es alle untergeordneten Komponenten, findet die Komponente, die den Kontextwert verwendet, und löst deren Aktualisierung aus.

Daher können Requisiten, Status und Kontext alle ein erneutes Rendern auslösen.

Zustand

Die Redux- und Kontextlösungen, eine ist eine Drittanbieterlösung und die andere ist integriert. Beide übergeben Werte über Requisiten oder erhalten Werte über Hooks, aber beide sind extern zur Komponente, während der Status intern zur Komponente ist. Wie kann der globale Status über den Status geteilt werden?

Tatsächlich ist dies beim Status von Klassenkomponenten nicht möglich, beim Status von Funktionskomponenten jedoch schon, da dieser über die Hook-API von useState erstellt wird und useState in benutzerdefinierte Hooks extrahiert und dann zur Verwendung in verschiedene Funktionskomponenten eingeführt werden kann.

importiere React, { useState } von 'react';

const useGlobalState = (Initialwert) => {
    const [globalState, setGlobalState] = useState(initialValue);
    gibt [Globalstatus, Globalstatus festlegen] zurück;
}

Funktion KomponenteA() {
    const [globalState, setGlobalState] = useGlobalState({name: 'aaa'});
    
    setGlobalState({name: bbb});
    return <div>{globalState}</div>
}

Funktion KomponenteA() {
    const [globalState, setGlobalState] = useGlobalState({name: 'aaa'});
 
    return <div>{globalState}</div>
}

Kann der obige Code den globalen Status teilen?

Dies ist in der Tat nicht möglich, da nun jede Komponente ein neues Objekt in ihren eigenen fiber.memorizedState einfügt und Änderungen auch ihren eigenen ändern.

Wäre es nicht in Ordnung, die Anfangswerte dieser beiden UseState auf dasselbe Objekt zu verweisen?

Auf diese Weise können mehrere Komponenten mit denselben Daten arbeiten.

Der obige Code muss wie folgt geändert werden:

lass globalVal = {
    Name: ''
}

const useGlobalState = () => {
    const [globalState, setGlobalState] = useState(globalVal);

    Funktion updateGlobalState(Wert) {
        globalVal = Wert;
        setzeGlobalState(Wert);
    }

    Rückgabewert [Globalstatus, Globalstatus aktualisieren];
}

Auf diese Weise verweist der von jeder Komponente erstellte Status auf dasselbe Objekt, und der globale Status kann auch gemeinsam genutzt werden.

Allerdings gilt hier eine Voraussetzung: Sie können nur die Eigenschaften des Objekts ändern, nicht jedoch das Objekt selbst.

Zusammenfassen

Die aktuelle Methode zum Entwickeln von Front-End-Seiten besteht darin, die Seite entsprechend der Logik in Komponenten aufzuteilen, jede Komponente separat zu entwickeln und sie dann Schicht für Schicht zusammenzusetzen und sie zum Rendern an ReactDOM.render oder Vues $mount zu übergeben.

Komponenten können über Requisiten und Status angepasst werden, um den Interaktionsstatus zu speichern, der bei Änderung automatisch neu gerendert wird. Darüber hinaus werden bei einer Kontextänderung die untergeordneten Komponenten gesucht, die die Kontextdaten verwenden, um eine erneute Darstellung auszulösen.

Komponenten kooperieren miteinander, daher ist Kommunikation unumgänglich. Props werden zum Anpassen von Komponenten verwendet und sollten nicht zum Übergeben bedeutungsloser Props verwendet werden, daher müssen sie über das globale Objekt übertragen werden.

React selbst bietet eine Kontextlösung. CreateContext gibt Provider und Consumer zurück, die zum Speichern bzw. Lesen von Daten verwendet werden. In Funktionskomponenten können Sie statt Provider auch useContext verwenden.

Obwohl der Kontext den globalen Status teilen kann, verfügt er nicht über einen Ausführungsmechanismus für asynchrone Logik. Bei komplexer asynchroner Logik müssen Sie dennoch Redux verwenden, das einen Middleware-Mechanismus zum Organisieren asynchroner Prozesse und zum Einkapseln und Wiederverwenden asynchroner Logik bereitstellt. Beispielsweise kann in Redux-Saga asynchrone Logik zur Wiederverwendung in Saga eingekapselt werden.
Sowohl Context als auch Redux unterstützen das Einfügen von Daten in Komponenten über Props, was für die Komponenten transparent und nicht aufdringlich ist.

Tatsächlich können benutzerdefinierte Hooks, die von useState gekapselt werden, auch den Zweck der globalen Datenfreigabe erreichen, indem sie den Anfangswert auf dasselbe Objekt verweisen. Dabei gibt es jedoch Einschränkungen. Sie können nur die Eigenschaften des Objekts ändern, nicht das Objekt selbst. Eigentlich ist es besser, den Kontext zu verwenden, aber ich möchte nur erwähnen, dass Sie dies tun können.

Um es kurz zusammenzufassen: Kontext und Redux können beide für die globale Statusverwaltung verwendet werden, eines ist integriert und das andere ist ein Drittanbieter. Verwenden Sie Kontext, wenn keine asynchrone Logik vorhanden ist, und verwenden Sie Redux, wenn eine asynchrone Logik vorhanden ist.

Damit ist dieser Artikel über die drei zugrunde liegenden Mechanismen der globalen Statusverwaltung von React abgeschlossen. Weitere relevante Inhalte zur globalen Statusverwaltung von React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!