Im heutigen Teil der Übersetzung des React-Lernprogramms erhalten Sie einen Überblick über die Methoden des Komponentenlebenszyklus.
→
Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX→
Teil 2: Funktionskomponenten→
Teil 3: Komponentendateien, Projektstruktur→
Teil 4: übergeordnete und untergeordnete Komponenten→
Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings→
Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript→
Teil 7: Inline-Stile→
Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten→
Teil 9: Komponenteneigenschaften→
Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling→
Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode→
Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung→
Teil 13: Klassenbasierte Komponenten→
Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus→
Teil 15: Komponentengesundheitsworkshops→
Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung→
Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten→
Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung→
Teil 19: Methoden des KomponentenlebenszyklusTeil 20: Die erste Lektion in bedingtem Rendern→
Teil 21: Zweite Lektion und Workshop zum bedingten Rendern→
Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden→
Teil 23: Erste Lektion zum Arbeiten mit Formularen→
Teil 24: Lektion der zweiten Form→
Teil 25: Workshop zum Arbeiten mit Formularen→
Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster→
Teil 27: KursprojektLektion 34. Methoden des Komponentenlebenszyklus, Teil 1
→
OriginalEines der Merkmale bei der Entwicklung von React-Anwendungen ist die Tatsache, dass wir ziemlich einfachen JavaScript-Code schreiben, der die internen Mechanismen von React steuert und uns dadurch großartige Möglichkeiten bietet, Anwendungsschnittstellen zu entwickeln und mit Daten zu arbeiten. Gleichzeitig durchlaufen die Komponenten, die wir während ihres Lebenszyklus verwenden, bestimmte Phasen. Oft wird das, was mit einer Komponente in einer Anwendung passiert, mit dem Leben einer Person verglichen. Menschen werden geboren, leben, in ihrem Leben passieren einige bedeutende Ereignisse, nach denen sie sterben. Die Komponenten von React sind ähnlich wie bei Menschen, da sie auch „geboren“, „leben“ und „sterben“. Wenn wir mit Komponenten arbeiten, können wir dank der Methoden ihres Lebenszyklus, die zu bestimmten Zeitpunkten ihres „Lebens“ aufgerufen werden, auf das reagieren, was mit ihnen passiert.
Vor kurzem hat das React-Entwicklungsteam drei Komponenten-Lebenszyklusmethoden veraltet. Wir werden diese Methoden dennoch berücksichtigen, da sie weiterhin verwendet werden können und in vorhandenem Code enthalten sind. Darüber hinaus wurden React zwei neue Methoden für den Lebenszyklus von Komponenten hinzugefügt, die wir in der nächsten Lektion diskutieren werden.
Wir werden nur die wichtigsten Methoden betrachten, die für diejenigen am relevantesten sind, die gerade mit dem Studium von React begonnen haben. Wenn Sie diese Bibliothek weiterhin beherrschen, können Sie mit anderen Methoden experimentieren.
Hier finden Sie einige gute Informationen zu den Lebenszyklusmethoden von React-Komponenten, die vor React 16.3 relevant waren. In einer Veröffentlichung aus dem offiziellen React-Entwicklerblog erfahren Sie hier, welche Änderungen in React 16.3 vorgenommen wurden.
Beginnen wir nun mit der Diskussion über die Lebenszyklusmethoden der React-Komponenten, auf die Sie am häufigsten stoßen werden.
Wir werden wie immer das Demo-Projekt hier verwenden. In diesem Fall beginnen wir mit einem Standardprojekt, das mit create-react-app in der Datei
App.js erstellt wurde und den folgenden Code enthält:
import React, {Component} from "react" class App extends Component { constructor() { super() this.state = {} } render() { return ( <div> Code goes here </div> ) } } export default App
Schauen wir uns zunächst die Methode an, die Sie bereits für klassenbasierte Komponenten verwendet haben. Dies ist die
render() -Methode.
Oft wird er nicht erwähnt, wenn er über die Methoden des Komponentenlebenszyklus spricht. Ich denke, dass diese Methode beim Vergleich einer Komponente mit einer Person mit dem Anziehen vor dem Ausgehen verglichen werden kann. Ziel dieser Methode ist es zu bestimmen, was auf dem Bildschirm angezeigt wird, dh wie die Komponente aussehen wird. Die
render() -Methode kann während der Lebensdauer einer Komponente mehrmals aufgerufen werden. Wenn React feststellt, dass sich etwas in Bezug auf eine Komponente geändert hat, z. B. ein Status oder Eigenschaften, dh etwas, das das Erscheinungsbild einer Komponente beeinflussen kann, kann React diese Methode aufrufen. Dies kann verglichen werden, wenn wir die Analogie mit Menschen fortsetzen, so dass eine Person entscheiden kann, sich umzuziehen. Zum Beispiel, um sich nach einem Arbeitstag auf eine Art Urlaubsereignis vorzubereiten.
Schauen wir uns nun eine andere Methode für den
componentDidMount() -
componentDidMount() . Diese Methode wird wie alle anderen klassenbasierten Komponentenmethoden im Hauptteil einer Komponentenklasse deklariert:
componentDidMount() { }
Diese Methode wird zum Zeitpunkt des Lebenszyklus der Komponente aufgerufen, was mit der „Geburt“ dieser Komponente verglichen werden kann. Diese Methode wird einmal ausgelöst, nachdem die Komponente in den DOM-Baum eingebunden (eingefügt) wurde. Wenn beispielsweise nach dem Ändern einiger Daten, die sich auf das Erscheinungsbild der Komponente auswirken, diese erneut gerendert werden, wird die Methode
componentDidMount() nicht aufgerufen. Dies liegt daran, dass bei der Ausführung solcher Vorgänge die Komponente nicht aus dem DOM-Baum entfernt und dann wieder in den Baum aufgenommen wird.
Die
componentDidMount() -Methode wird normalerweise verwendet, um bestimmte APIs aufzurufen, wenn der Entwickler Daten aus externen Quellen benötigt. Angenommen, die Komponente, die wir hier betrachten, heißt tatsächlich
TodoList und ist eine Komponente, die eine
TodoList in einer Todo-Anwendung bildet. Die
componentDidMount() -Methode einer solchen Komponente kann Materialien aus der Serverdatenbank laden, die für die korrekte Anzeige der auf dem Server gespeicherten Aufgabenliste erforderlich sind. Infolgedessen können wir nach Abschluss der Installation der Komponente in der Methode
componentDidMount() die Daten laden, die erforderlich sind, damit die Komponente korrekt auf der Seite angezeigt wird. Wir werden auch über das Laden von Daten sprechen, die von Komponenten benötigt werden. Im Moment können Sie sich jedoch daran erinnern, dass dies der häufigste Anwendungsfall für
componentDidMount() .
Die nächste Methode zum Komponentenlebenszyklus, die wir diskutieren, heißt
componentWillReceiveProps() . Diese Methode kann mit dem verglichen werden, was passiert, wenn jemand ein Geschenk von jemandem erhält. Eine Komponente kann also Eigenschaften von einer übergeordneten Komponente empfangen. Jedes Mal, wenn eine Komponente Eigenschaften annimmt, wird diese Methode aufgerufen. Gleichzeitig wird diese Methode jedes Mal aufgerufen, wenn die übergeordnete Komponente die Eigenschaften an die untergeordnete Komponente übergibt, und dies nicht nur, wenn dies zum ersten Mal geschieht. Wenn die übergeordnete Komponente beispielsweise beschließt, die an die untergeordnete Komponente übergebenen Eigenschaften zu ändern, können wir in der Methode
componentWillReceiveProps() beispielsweise überprüfen, ob sich die neuen Eigenschaften von denen unterscheiden, die bereits an die Komponente übergeben wurden. Tatsache ist, dass, wenn sich die neuen Eigenschaften nicht von den alten unterscheiden, dies bedeutet, dass ihr Empfang nichts ändert, was bedeutet, dass wir nach dem Herausfinden nichts mehr tun können. Wenn sich die neuen Eigenschaften von den alten unterscheiden, können wir bestimmte Aktionen ausführen. In der Regel wird diese Methode im Hauptteil der Komponentenklasse wie folgt deklariert:
componentWillReceiveProps(nextProps) { }
Hier wird es normalerweise als Parametername
nextProps , aber Sie können diesen Parameter beliebig benennen. Um eine bestimmte Eigenschaft, die bereits auf die Komponente übertragen wurde, mit der bereits zuvor übergebenen Eigenschaft zu vergleichen und weitere Aktionen festzulegen, können Sie diese Konstruktion verwenden:
componentWillReceiveProps(nextProps) { if (nextProps.whatever !== this.props.whatever) {
Normalerweise wird diese Methode auf diese Weise verwendet.
Wie bereits erwähnt, waren nach der Veröffentlichung von React 16.3 einige Methoden des Komponentenlebenszyklus veraltet, und
componentWillReceiveProps() ist eine dieser Methoden.
Bis React 17 können diese Legacy-Methoden weiterhin verwendet werden, obwohl dies besser nicht der Fall ist. Wenn Sie auf die betreffende Methode nicht verzichten können, müssen Sie sie
UNSAFE_componentWillReceiveProps() . Nach React 17 bedeutet der Name der
componentWillReceiveProps() -Methode nichts Besonderes.
Es ist nützlich, diese Methode zu kennen, um veralteten Code verstehen zu können, sie wird jedoch bei der Entwicklung moderner React-Anwendungen nicht verwendet.
Eine weitere interessante Methode für den Komponentenlebenszyklus heißt
shouldComponentUpdate() . Wenn wir die Komponente weiterhin mit einer Person vergleichen, erinnert er sich an den Moment, in dem eine Person darüber nachdenkt, ob sie sich umziehen muss oder nicht. Wenn React unter normalen Bedingungen nicht ganz sicher ist, ob eine Komponente erneut gerendert werden soll, wird sie für alle Fälle gerendert. Es spielt keine Rolle, ob dies gemäß der Anwendungslogik erforderlich ist oder nicht.
Dies führt dazu, dass React Komponenten neu rendert, auch wenn sich nichts an der Komponente ändert. Dies kann die Anwendung verlangsamen, da React nach diesem Prinzip alle Komponenten verarbeitet, aus denen die Anwendung besteht. Mit der Methode
shouldComponentUpdate() kann der Entwickler die Anwendung optimieren. Hier können Sie eine Logik implementieren, mit deren Hilfe Sie herausfinden können, ob die Komponente aktualisiert werden muss. Diese Methode wird normalerweise folgendermaßen deklariert:
shouldComponentUpdate(nextProps, nextState) {
Darüber hinaus müssen Sie bei dieser Methode
true , wenn die Komponente unter Berücksichtigung neuer Eigenschaften und Status neu gerendert werden muss. Andernfalls muss
false zurückgegeben werden. Die Rückgabe von
false von dieser Methode führt dazu, dass die Komponente nicht aktualisiert wird und die Anwendung schneller ausgeführt wird. Auf diese Weise müssen Sie jedoch sicherstellen, dass die Komponente nicht wirklich neu gerendert werden muss. Wenn die Komponente aktualisiert werden muss und diese Methode
false , führt dies zu Fehlern, die nur schwer zu beheben sind.
Eine andere Methode für den Komponentenlebenszyklus, über die wir sprechen werden, heißt
componentWillUnmount() . Diese Methode markiert das Ende der „Lebensdauer“ der Komponente - den Moment, in dem sie aus dem DOM-Baum entfernt wird und vom Bildschirm verschwindet.
Diese Methode wird hauptsächlich verwendet, um Ressourcen freizugeben, die von einer Komponente belegt werden, und um die Dinge in Ordnung zu bringen, bevor sie gelöscht wird. Wenn die
componentDidMount() -Methode beispielsweise mit einem Ereignis-Listener konfiguriert wurde, aufgrund dessen beim Scrollen der Seite durch den Benutzer Code ausgeführt wird, können Sie in
componentWillUnmount() einen solchen Ereignis-Listener löschen. Tatsächlich hat diese Methode viele Anwendungen, die darauf abzielen, alles aus der Anwendung zu entfernen, was sich nach dem Verschwinden der Komponente als unnötig herausstellt.
Hier ist der vollständige Code unserer
App Komponente, in der Lebenszyklusmethoden hinzugefügt werden:
import React, {Component} from "react" class App extends Component { constructor() { super() this.state = {} } componentDidMount() {
Damit ist diese Lektion abgeschlossen, obwohl zu beachten ist, dass die Lebenszyklusmethoden der React-Komponenten nicht auf die heute beschriebenen beschränkt sind.
Lektion 35. Methoden des Komponentenlebenszyklus, Teil 2
→
OriginalWie bereits in der vorherigen Lektion erwähnt, wurde beim Erscheinen von React 16.3 berichtet, dass die drei Komponenten-Lebenszyklusmethoden veraltet waren. Diese Methoden sind
componentWillMount() ,
componentWillReceiveProps() und
componentWillUpdate() . Zwei neue Methoden wurden ebenfalls berichtet. Dies ist die statische Methode
getDerivedStateFromProps() und die Methode
getSnapshotBeforeUpdate() . Es kann nicht gesagt werden, dass diese Methoden in zukünftigen Klassen dieses Kurses eine wichtige Rolle spielen werden, aber trotzdem werden wir sie hier kennenlernen.
Wir werden in demselben Projekt experimentieren, das wir zuletzt verwendet haben.
So sieht die Deklaration der Methode
getDerivedStateFromProps() aus:
static getDerivedStateFromProps(props, state) { }
Beachten Sie das
static vor dem Methodennamen. Er muss auf der Grundlage der von ihm akzeptierten Eigenschaften einen aktualisierten Zustand zurückgeben. Es wird in den Fällen verwendet, in denen eine bestimmte Komponente die eingehenden Eigenschaften, die sie von der übergeordneten Komponente empfängt, akzeptieren und ihren Status basierend auf diesen Eigenschaften konfigurieren muss. Details zu dieser Methode finden Sie
hier . Dieses im React-Blog veröffentlichte Material besagt, dass die Verwendung dieser Methode in all den Situationen, in denen sie nützlich erscheint, alles andere als gerechtfertigt ist. Die unsachgemäße Verwendung kann zu verschiedenen Fehlern und zu einem Rückgang der Anwendungsleistung führen. Verwenden Sie sie daher mit Vorsicht. Sie sollten nicht versuchen, Probleme mit seiner Hilfe zu lösen, für deren Lösung es nicht vorgesehen ist.
Hier ist die Dokumentation für diese Methode.
Lassen Sie uns nun über die Methode
getSnapshotBeforeUpdate() sprechen. So sieht seine Erklärung im Klassenkörper aus:
getSnapshotBeforeUpdate() { }
Es kann als Lebenszyklusmethode betrachtet werden, mit der Sie vor dem Aktualisieren eine Sicherungskopie der Komponenten erstellen können. Es ähnelt einer Momentaufnahme des Status einer Anwendung. Es sollte beachtet werden, dass die Entwickler von React sagen, dass der Umfang dieser Methode begrenzt ist.
Hier ist die Dokumentation dafür.
Zusammenfassung
Heute haben wir über Methoden des Komponentenlebenszyklus gesprochen. Wenn Sie die Entwicklung von React-Anwendungen vorantreiben, werden diese sicherlich nützlich sein. In den weiteren Klassen dieses Kurses werden wir uns mit diesen Methoden befassen, insbesondere mit
componentDidMount() . Nächstes Mal werden wir über bedingtes Rendern sprechen.
Liebe Leser! Wenn Sie React-Anwendungen professionell entwickeln, teilen Sie uns bitte mit, wie Sie Methoden für den Lebenszyklus von Komponenten verwenden.
