Lebenszyklus und Ausführungsreihenfolge von React-Class-Komponenten

1. Zwei Möglichkeiten zum Definieren von Reaktionskomponenten

1. Funktionskomponente. Eine einfache Funktionskomponente sieht wie die folgende aus. Sie empfängt Props und rendert DOM, ohne auf andere Logik zu achten.

Funktion Willkommen (Requisiten) {
  return <h1>Hallo, {props.name}</h1>;
}

Funktionskomponenten können weder Status noch Komponentenlebenszyklusmethoden verwenden. Sie verfügen nicht über diese und sind reine Anzeigekomponenten.

Vorschlag: Überlegen Sie beim Schreiben einer Komponente zunächst, ob die Komponente als Anzeigekomponente geschrieben werden soll. Wenn sie als Anzeigekomponente geschrieben werden kann, versuchen Sie, sie als Anzeigekomponente zu schreiben.

2. Klassenkomponenten müssen React.Component erben, Status und Lebenszyklus haben und dies

3. Gemeinsamkeiten

a. Unabhängig davon, ob eine Komponente mit einer Funktion oder einer Klasse deklariert wird, darf sie ihre eigenen props nicht ändern.

b. Alle React-Komponenten müssen reine Funktionen sein und dürfen ihre eigenen props nicht ändern.

c. React ist ein unidirektionaler Datenfluss. Wenn die übergeordnete Komponente die Eigenschaft ändert, wird die Ansicht der untergeordneten Komponente aktualisiert.

d. props Eigenschaft wird von der Außenwelt weitergegeben und state ist die Komponente selbst. Der Status kann in der Komponente beliebig geändert werden.

e. Änderungen an Komponenteneigenschaften und -status aktualisieren die Ansicht

4. Hinweise zur Komponentendefinition

a. Komponentennamen müssen mit einem Großbuchstaben beginnen

b. Der Rückgabewert einer Komponente kann nur ein Stammelement haben

2. Ausführungsreihenfolge von Lebenszyklusfunktionen in verschiedenen Phasen von Klassenkomponenten

1. Die Ausführungsreihenfolge der Klassenkomponenten ist wie folgt

Neu: getDerivedStateFromProps, getSnapshotBeforeUpdate

UNSAFE: UNSAFE_componentWillMount, UNSAFE_componentWillUpdate, UNSAFE_componentWillReceiveProps werden in Version 17 und höher entfernt

Mounten bedeutet, dass die Komponente instanziiert und in der folgenden Reihenfolge in das DOM eingefügt wird:

Konstruktor -> getDerivedStateFromProps -> Render -> componentDidMount

Aktualisieren bedeutet, dass bei einer Statusänderung oder Änderung der Eigenschaften eine Aktualisierung durchgeführt wird. Die Reihenfolge ist wie folgt:

getDerivedStateFromProps -> shouldComponentUpdate -> rendern -> getSnapshotBeforeUpdate -> componentDidUpdate

Unmounten bedeutet, dass die Komponente aus dem DOM entfernt wird und nur ein Lebenszyklus ausgeführt wird: componentWillUnmount

2. Konstruktor(): Wenn eine React-Komponente gemountet wird, wird zuerst ihr Konstruktor aufgerufen.

Zweck: Normalerweise machen Sie in React nur zwei Dinge im Konstruktor:

a. Initialisieren Sie den internen Status, indem Sie diesem Status ein Objekt zuweisen.

b. Binden Sie eine Instanz an die Ereignisbehandlungsfunktion

Beachten:

a. Wenn Sie einen Konstruktor für eine React.Component-Unterklasse implementieren, rufen Sie super(props) vor anderen Anweisungen auf.

Andernfalls ist this.props im Konstruktor möglicherweise nicht definiert

b. Rufen Sie setState nicht innerhalb von

3. componentWillMount(), vor dem Rendern, wenn die React-Komponente gemountet ist.

Funktion: Sie können die Methode setState aufrufen, um den Status zu ändern. Synchrone Methoden blockieren und verursachen kein sekundäres Rendering, während asynchrone Methoden nicht blockieren und

Führt zu einem zweiten Rendering.

Hinweis: Diese Methode wurde als unsicher markiert und sollte nicht verwendet werden.

4. getDerivedStateFromProps((props, state), statische Methode, um Props auf den internen Status der Komponente zu aktualisieren, hängen

Wird beim Herunterladen und Aktualisieren aufgerufen.

Wirkung:

a. Aktualisieren Sie den internen Status bedingungslos basierend auf Eigenschaften, d. h. aktualisieren Sie den Status, solange ein Eigenschaftenwert übergeben wird

b. Aktualisieren Sie den Statuswert nur, wenn der Prop-Wert und der Statuswert unterschiedlich sind

Beachten:

a. Dies kann nicht innerhalb einer Methode verwendet werden

b. Wenn der von den Props übergebene Inhalt Ihren Status nicht beeinflussen muss, müssen Sie einen Nullwert zurückgeben. Dieser Rückgabewert ist erforderlich.

Es ist notwendig, also versuchen Sie, es am Ende der Funktion zu schreiben.

Asynchrone Verarbeitung:

Zuvor konnten wir asynchrone Vorgänge in componentWillReceiveProps ausführen, wenn sich die Eigenschaften änderten.

Änderungen der Requisiten führen zu Zustandsänderungen.

Die React-SetState-Operation wird durch eine Transaktion zusammengeführt, was zu einem Batch-Update-Prozess führt, während React

Die meisten Aktualisierungsprozesse werden durch „setState“ ausgelöst, daher kommt es nicht sehr häufig zum Auslösen des Renders.

Um nun auf Änderungen in den Eigenschaften reagieren zu können, sollten wir asynchrone Operationen in componentDidUpdate ausführen, um auf Änderungen zu reagieren

5. shouldComponentUpdate(nextProps, nextState), beim Aktualisieren, d. h. wenn sich der Status oder die Eigenschaften ändern,

Wird aufgerufen, bevor das Rendern ausgeführt wird

Wirkung:

a. Leistungsoptimierte Lebenszyklusmethode. Mit dieser Methode können die geänderten Eigenschaften und Zustände abgerufen werden, die mit den ursprünglichen Eigenschaften und Zuständen übereinstimmen.

Bestimmen Sie, ob Rendering erforderlich ist

Beachten:

a. Der Rückgabewert dieser Methode muss true oder false sein. Wenn false zurückgegeben wird, wird das Rendering nicht ausgeführt.

6. render(), die einzige Methode, die in einer Klassenkomponente implementiert werden muss, eine reine Funktion

Wirkung:

a. Hier werden Komponenten und DOM-Knoten geschrieben und ein jsx zurückgegeben, das der Ausdruck von React.createElement nach der Bearbeitung ist

Beachten:

a. Der erste Buchstabe des Komponentennamens sollte groß geschrieben werden

b. Es kann nur einen Stammknoten geben

c. Sie können <></> als Stammknoten verwenden. Dieser Knoten wird nicht gerendert. Es ist die Abkürzung für React.Fragment

7. getSnapshotBeforeUpdate(prevProps, prevState), in der aktuellsten Rendering-Ausgabe (an den DOM-Knoten übermittelt)

Bisher aufgerufen, nicht in den Test erweitert, das Verständnis beschränkt sich auf diese

Wirkung:

a. Dadurch können Komponenten bestimmte Informationen aus dem DOM erfassen, bevor Änderungen auftreten (z. B. die Bildlaufposition). Jeder dieser Lebenszyklen

Der Rückgabewert wird als Parameter an componentDidUpdate() übergeben.

8. componentDidMount(), das unmittelbar nach dem Mounten der Komponente (Einfügen in den DOM-Baum) aufgerufen wird

Wirkung:

a.setState

b. DOM betreiben

c. Senden Sie eine Anfrage, um erste Daten zu erhalten

9. componentDidUpdate(prevProps, prevState) wird unmittelbar nach dem Update aufgerufen (DOM wurde aktualisiert)

Wirkung:

a.setState

b. DOM betreiben

c. Senden Sie eine Anfrage zum Abrufen von Daten

Beachten:

a. setState muss in eine bedingte Anweisung eingeschlossen werden, sonst führt es zu einer Endlosschleife

10. componentWillUnmount(), das direkt vor der Deinstallation und Zerstörung der Komponente aufgerufen wird

Funktion: Hier können Sie Ressourcen freigeben, wie z.B. Timer löschen, removeEventListener

Hinweis: setState ist hier ungültig und sollte nicht aufgerufen werden

11. getDerivedStateFromError Noch nicht im Detail verstanden

12. componentDidCatch ist noch nicht im Detail verstanden

3. Referenz

Offizielle Lebenszyklus-API https://react.docschina.org/docs/react-component.html

Dies ist das Ende dieses Artikels über den Lebenszyklus von React Class-Komponenten. Weitere relevante Inhalte zu React Class-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!