Reagieren Sie auf den animierten Leitfaden

Der Autor der Notiz, die wir heute veröffentlichen, sagt, dass es eine Lücke zwischen der Verwendung von React für die Entwicklung von Benutzeroberflächen und der Notwendigkeit gibt, zu wissen, wie React tatsächlich funktioniert. Viele Leute, die React in der Praxis anwenden, wissen nicht, was in den Eingeweiden dieser Bibliothek vor sich geht. In einer animierten Form werden wir hier einige Schlüsselprozesse betrachten, die in React während der Bildung von Benutzeroberflächen auftreten.

Starten einer Reaktionsanwendung

Es ist zu beachten, dass Sie zum Erstellen von React-Anwendungen möglicherweise nicht über die internen Mechanismen von React Bescheid wissen. Aber ich habe beschlossen, dieses Material für alle vorzubereiten, die aus irgendeinem Grund die Arbeit von React besser verstehen wollen. Die beschriebenen Prozesse werden in animierter Form dargestellt. Ich hoffe, dies hilft, ihre Analyse klarer zu machen.

Reagieren Sie beim ersten Start der Anwendung automatisch die App Klasse im Stammcontainer der Anwendung.


Zuerst Mount <App />

Virtuelles DOM und Vergleichsalgorithmus

Während der Arbeit des React-Subsystems, das den Diffing-Algorithmus implementiert, wird nach den Unterschieden zwischen den beiden virtuellen DOMs (Virtual Document Object Model, Virtual Document Model) gesucht. Machen Sie eine Weile langsamer. Zwei virtuelle DOM? Es scheint nur ein virtuelles DOM in React zu geben ... Lassen Sie es uns herausfinden. React vergleicht das vorherige virtuelle DOM mit dem neuen. Das Aktualisieren des browserbasierten DOM erfolgt nur, wenn beim Vergleich virtueller DOMs Unterschiede zwischen diesen festgestellt werden.


Abstrakte Animation des React-Vergleichsalgorithmus. Wenn festgestellt wird, dass die beiden virtuellen DOM-Bäume unterschiedlich sind, wird das reale DOM im Browser mit dem neuesten virtuellen DOM-Baum abgeglichen

Überlegen Sie, was in der obigen Animation passiert.

• Beim API.tweet() wird ein API.tweet() mit den POST-Anforderungsdaten ausgeführt, die eine message enthalten.
• Als Antwort auf die Anfrage werden payload zurückgegeben, diese Daten werden an den Rückruf (event) => { … } gesendet.
• Wenn die an die Nutzdaten zurückgegebenen Daten zu einer Änderung der props , wird ein Vergleich der virtuellen DOM-Bäume durchgeführt.
• Wenn sich herausstellt, dass die Bäume unterschiedlich sind, wird der letzte Baum an den Browser gesendet.
• Dann wird das neue virtuelle DOM alt und wir erwarten neue Ereignisse.

Komponenten reagieren

Die React-Komponente ist nur ein JavaScript-Objekt. React erstellt ein eigenes virtuelles DOM, das eine Baumansicht der gesamten Benutzeroberflächenstruktur darstellt. React speichert den virtuellen DOM-Baum im Speicher. Bevor das, was sich im virtuellen DOM befindet, physisch in einem Browserfenster angezeigt wird, kann React viele Vorgänge ausführen, um Elemente zum virtuellen DOM hinzuzufügen, zu aktualisieren und zu löschen.

Verwenden Sie die Komponentenmethode render() nicht für Elemente, die nicht mit dem Rendern von Benutzeroberflächenelementen zusammenhängen. Wenn Sie den Status oder die Eigenschaften einer Komponente ändern müssen, verwenden Sie Standardmethoden für den Lebenszyklus von React-Komponenten.

Die render () -Methode sollte immer eine reine Funktion bleiben.

Die Methode render() aktualisiert das DOM der virtuellen Komponente. Wenn sich der neue virtuelle DOM-Baum vom zuvor angezeigten Baum unterscheidet, aktualisiert React neben dem Aktualisieren des virtuellen DOM auch das reale Browser-DOM. Der Entwickler muss das Browser-DOM nicht direkt aktualisieren. Diese Regel gilt für alle Stellen im Code einer React-Anwendung. Dies ist besonders wichtig, wenn es auf die Funktion render() angewendet wird.


Verschmutzen Sie die render () -Methode nicht mit Funktionsaufrufen, die das DOM direkt aktualisieren

In der render() -Methode sollten Sie den Status der Komponente nicht ändern (auch nicht mit setState ) und HTTP-Anforderungen ausführen. Greifen Sie mit dieser Methode nicht auf jQuery zu. Führen Sie keine Anforderungen zum Laden bestimmter Daten aus. Tatsache ist, dass die render() -Methode in einem Zustand gehalten werden muss, in dem sie eine reine Funktion wäre. Diese Methode wird immer im Endstadium der Komponentenmechanismen aufgerufen. Während der Implementierung müssen Sie nur die Benutzeroberfläche aktualisieren. Es wird davon ausgegangen, dass alle Aktualisierungen des virtuellen DOM bereits abgeschlossen sind.

Komponentenlebenszyklusereignisse

Wenn eine Komponente zum ersten Mal im DOM bereitgestellt wird, löst React das Lebenszyklusereignis componentWillMount . Nachdem die virtuelle Komponente zum ersten Mal angezeigt wurde (dh zum ersten Mal im realen DOM des Browsers bereitgestellt wurde), wird ein anderes Ereignis aufgerufen - componentDidMount .

Es wird erwartet, dass der größte Teil der Komponentenlogik, die in allen Phasen der Anwendung aufgerufen wird, in ihren Lebenszyklusmethoden genau beschrieben wird.

Zusammenfassung

Viele React-Entwickler verwenden heutzutage funktionale Komponenten und Hooks anstelle von Komponenten, die auf Klassen und ihren Lebenszyklusmethoden basieren. Lebenszyklusmethoden gelten sogar als unsicher. Wenn Sie der React-Dokumentation glauben, werden diese Methoden möglicherweise in Zukunft nicht mehr unterstützt. Aus diesem Grund betrachtet der Autor diesen Artikel als eine Art Beschreibung von Technologien, von denen einige bald in Vergessenheit geraten könnten. Trotzdem hofft er, dass dieses Material für diejenigen nützlich sein wird, die gerade erst anfangen, sich mit React vertraut zu machen, und für diejenigen, die sich für die Geschichte der Entwicklung von Webentwicklungstechnologien interessieren.

Liebe Leser! Verwenden Sie React Hooks?