Share
Reaktionskomponenten kapseln Teile der Benutzeroberfläche. Ihre vollständige Benutzeroberfläche der React-Anwendung wird als Baumstruktur vieler geschachtelter Komponenten dargestellt. Abhängig vom Anwendungsfluss müssen die einzelnen Komponenten vor und nach dem Rendern sowie vor und nach dem Update einige Aufgaben ausführen.
Schließlich ist auch die Bereinigung und Fehlerbehandlung wichtig. React bietet eine Reihe von Methoden zum Lebenszyklus, die Sie überschreiben und Ihre eigene Logik an der richtigen Stelle einfügen können. In diesem Lernprogramm erfahren Sie mehr über den Lebenszyklus einer React-Komponente von der Wiege bis zur Bahre, welche Methoden in jeder Phase verfügbar sind und wann es angebracht ist, sie zu überschreiben.
Beachten Sie, dass ich in diesem Lernprogramm den modernen ES6-Klassenstil verwende.
Ich werde eine Komponente namens PopularBar verwenden, um alle Lebenszyklusmethoden und deren Verhalten zu veranschaulichen. Der vollständige Quellcode ist auf GitLab verfügbar.
Die beliebte Leiste enthält zwei weitere Komponenten ClickCounter. Jeder ClickCounter Die Komponente enthält eine Schaltfläche mit einem Emoji und zeigt an, wie oft auf die Count-Eigenschaft geklickt wurde, die sie von ihrem Host erhält. Hier ist der machen() Methode von ClickCounter:
Accentsconagua
render () return ( lassen Sie clickCount = this.state.clickCount + 1 this.setState (clickCount: clickCount)> this.getTotal () < 100 ? this.getTotal() : "99+" ); Die PopularBar-Komponente gibt zwei ClickCounter-Komponenten mit Emojis mit Daumen nach oben und nach unten aus. Beachten Sie, dass, wenn die Requisite "show" falsch ist, ein leeres div ausgegeben wird. Dies wird später wichtig, wenn wir das Montieren und Demontieren besprechen.
render () if (! this.props.show) return () Rückkehr ()
Reakt-Komponenten sind vorhanden, wenn sie von einer übergeordneten Komponente oder von der Stammanwendung gerendert werden. Bevor eine Komponente gerendert werden kann, muss sie jedoch (nur einmal) erstellt und in das virtuelle DOM eingebunden werden (jedes Mal, wenn sie zum virtuellen DOM hinzugefügt wird)..
Die Reihenfolge der Ereignisse ist, dass zuerst die Komponente konstruiert wird, dann die componentWillMount () Methode aufgerufen wird, wird die Komponente in das virtuelle DOM eingebunden und anschließend das componentDidMount ()wird genannt. Dadurch haben Sie viele Möglichkeiten, verschiedene Initialisierungsarten auszuführen.
Der Konstruktor für eine Komponente wird einmal pro Anwendung aufgerufen (wenn Sie die Seite in Ihrem Browser aktualisieren, wird sie als neue Anwendung betrachtet). Hier ist der Konstruktor für die PopularBar-Komponente. Es macht wirklich nichts außer Anruf Super(), was erforderlich ist, und melden Sie sich an der Konsole an.
Klasse PopularBar erweitert Component constructor () super () console.log ('--- PopularBar-Konstruktor ist hier!')Der Konstruktor für ClickCounter initialisiert sein clickCount Zustand zu Null:
Klasse ClickCounter erweitert Component Konstruktor (Requisiten) Super (Requisiten) this.state = clickCount: 0 console.log (props.emoji + '=== ClickCounter-Konstruktor ist hier!')
Dies ist ein perfektes Beispiel für eine Initialisierung, die einmal pro Anwendung ausgeführt werden muss. Wenn eine ClickCounter-Komponente mehrmals eingehängt wird, sollte sie ihre Klickanzahl beibehalten.
Das componentWillMount () Die Methode wird aufgerufen, bevor die Komponente bereitgestellt wird. Es ist also noch keine Komponente vorhanden. Im Allgemeinen ist zu diesem Zeitpunkt nicht viel zu tun, es sei denn, Sie haben eine spezielle Initialisierung, die bei jedem Mounten der Komponente ausgeführt wird, aber selbst das kann warten componentDidMount ()Methode.
Hier sind die Methodenimplementierungen für PopularBar und ClickCounter:
// PopularBar componentWillMount () console.log ('--- PopularBar wird eingebunden. Yay!') // ClickCounter componentWillMount () console.log (this.props.emoji + '=== ClickCounter wird eingebunden. Yay.) ! ') Du kannst anrufen this.setState () hier, wenn du willst Die Requisiten sind offensichtlich nicht zugänglich.
Hier ist die Komponente bereits eingehängt, und Sie können alle Arbeiten ausführen, die für den Zugriff auf die Komponente im Kontext des virtuellen DOM erforderlich sind. Hier sind die Methodenimplementierungen für die PopularBar und den ClickCounter. Die Komponente ist bereits vorhanden, so dass auf ihre Eigenschaften (Requisiten) zugegriffen und angezeigt werden kann.
componentDidMount () console.log ('--- PopularBar hat nicht gemountet. upCount:' + this.props.upCount + ', downCount:' + this.props.downCount) // ClickCounter componentDidMount () console.log ( this.props.emoji + '=== ClickCounter hat gemountet. count:' + this.props.count) Lassen Sie uns die Reihenfolge der Ereignisse in der PopularBar und den beiden darin enthaltenen ClickCounter-Komponenten zusammenfassen. Zu Ihrer Bequemlichkeit zeige ich die Emoji für jeden ClickCounter an, damit sie unterschieden werden können.
--- PopularBar-Konstruktor ist da! --- PopularBar wird montiert. Yay! 👍 === ClickCounter-Konstruktor ist da! = === ClickCounter wird gemountet. Yay! 👎 === ClickCounter-Konstruktor ist da! = === ClickCounter wird gemountet. Yay! = === ClickCounter wurde gemountet. Anzahl: 5 👎 === ClickCounter wurde geladen. Anzahl: 8 --- PopularBar hat gemountet. upCount: 5, DownCount: 8
Zuerst wird die PopularBar erstellt und ihre componentWillMount () Methode wird aufgerufen. Dann der Konstruktor und componentWillMount () Methoden jeder ClickCounter-Komponente werden aufgerufen, gefolgt von der componentDidMount () ruft beide ClickCounter-Komponenten auf. Endlich, das componentDidMount () Methode von PopularBar wird aufgerufen. Insgesamt ist der Fluss verschachtelt, wobei alle Unterkomponenten vollständig montiert sein müssen, bevor die enthaltene Komponente vollständig montiert ist.
Sobald die Komponente montiert ist, kann sie gerendert werden. Hin und wieder kann sich der Zustand der Komponente oder der Requisiten, die sie von ihrem Container erhält, ändern. Solche Änderungen führen zu einem erneuten Rendern. Die Komponente erhält jedoch die Möglichkeit, benachrichtigt zu werden und sogar zu steuern, ob das Rendern erfolgen soll oder nicht.
Es gibt vier Methoden für den Update-Prozess, und ich werde sie der Reihe nach behandeln.
Das componentWillReceiveProps () Diese Methode wird aufgerufen, wenn neue Requisiten aus dem Container empfangen werden. Sie haben Zugriff auf die aktuellen Requisiten über this.props und zu den nächsten Requisiten über die nextProps Parameter. Hier ist der componentWillReceiveProps () Methode von ClickCounter.
componentWillReceiveProps (nextProps) console.log (this.props.emoji + '=== ClickCounter erhält Requisiten.' + 'nächste Requisiten:' + nextProps.count)
Sie haben hier die Möglichkeit zu prüfen, welche Requisiten sich geändert haben, und ändern den Status der Komponente, wenn Sie möchten. Es ist in Ordnung, anzurufen this.setState () Hier.
Das shouldComponentUpdate () ist eine Schlüsselmethode. Es wird aufgerufen, wenn entweder neue Requisiten empfangen werden (nach componentWillReceiveProps () aufgerufen wird) oder nachdem der Status der Komponente an anderer Stelle geändert wurde. Wenn Sie diese Methode nicht implementieren, wird die Komponente jedes Mal erneut gerendert.
Wenn Sie es implementieren und 'false' zurückgeben, werden die Komponente und ihre untergeordneten Komponenten nicht gerendert. Wenn der Status von untergeordneten Komponenten geändert wird, werden diese erneut gerendert, auch wenn Sie immer 'false' von den übergeordneten Komponenten zurückgeben shouldComponentUpdate ().
Sie erhalten hier Zugriff auf die nächsten Requisiten und den nächsten Status, so dass Sie alle Informationen haben, um eine Entscheidung zu treffen. Die ClickCounter-Komponente zeigt 99+ an, wenn ihre Anzahl 99 übersteigt, und muss nur dann aktualisiert werden, wenn die Anzahl weniger als 100 beträgt. Hier der Code:
shouldComponentUpdate (nextProps, nextState) let currTotal = this.getTotal () let sollteUpdate = currTotal < 100 console.log(this.props.emoji + '=== ClickCounter should ' + (shouldUpdate ?": 'NOT ') + 'update') return shouldUpdate
Das componentWillUpdateMethod () wird nach der Komponente aufgerufen shouldComponentUpdate () nur wenn shouldComponentUpdate () zurückgegeben wahr Zu diesem Zeitpunkt haben Sie sowohl die nächsten Requisiten als auch den nächsten Zustand. Sie können den Status hier nicht ändern, da dies dazu führen wird shouldComponentUpdate () wieder angerufen zu werden.
Hier ist der Code:
componentWillUpdate (nextProps, nextState) console.log (this.props.emoji + '=== ClickCounter aktualisiert' + 'nextProps.count:' + nextProps.count + 'nextState.clickCount:' + nextState.clickCount)
Endlich nach dem Rendern die componentDidUpdate () Methode wird aufgerufen. Es ist in Ordnung, anzurufen this.setState () hier, weil das Rendern für die vorherige Zustandsänderung bereits abgeschlossen ist.
Hier ist der Code:
componentDidUpdate () console.log (this.props.emoji + '=== ClickCounter wurde aktualisiert')
Lassen Sie uns die Update-Methoden in Aktion sehen. Ich werde zwei Arten von Updates verursachen. Zuerst klicke ich auf die Schaltfläche "Daumen hoch", um eine Statusänderung auszulösen:
--- PopularBar-Konstruktor ist da! PopularBar.js: 10 --- PopularBar wird eingebunden. Yay! PopularBar.js: 14 👍 === Der ClickCounter-Konstruktor ist da! = === ClickCounter wird gemountet. Yay! 👎 === ClickCounter-Konstruktor ist da! = === ClickCounter wird gemountet. Yay! = === ClickCounter wurde gemountet. Anzahl: 5 ClickCounter.js: 20 = === ClickCounter wurde gemountet. count: 8 ClickCounter.js: 20 --- PopularBar hat gemountet. upCount: 5, downCount: 8 Click === ClickCounter sollte aktualisiert werden 👍 === ClickCounter aktualisiert nextProps.count: 5 nextState.clickCount: 1 = === ClickCounter wurde aktualisiert
Notiere dass der nextState.clickCount ist 1, was den Aktualisierungszyklus auslöst. Das nächste Update wird durch das Übergeben neuer Requisiten verursacht. Um dies zu erleichtern, füge ich eine kleine Funktion hinzu, die alle 5 Sekunden ausgelöst wird und die Zählung um 20 erhöht. Hier ist der Code in der Haupt-App-Komponente, die die PopularBar enthält. Die Änderung wird bis zum ClickCounter übertragen.
class App erweitert Component constructor () super () this.state = showPopularBar: true, upCount: 5, downCount: 8 componentDidMount () this.timer = setInterval (this.everyFiveSeconds.bind (this), 5000 ); everyFiveSeconds () let state = this.state state.upCount + = 20 this.setState (state)
Hier ist die Ausgabe. Beachten Sie, dass der ClickCounter willReceiveProps () Methode wurde aufgerufen und die nextState.clickCount bleibt bei null, aber nextProps.Count ist jetzt 25.
--- PopularBar-Konstruktor ist da! --- PopularBar wird montiert. Yay! 👍 === ClickCounter-Konstruktor ist da! = === ClickCounter wird gemountet. Yay! 👎 === ClickCounter-Konstruktor ist da! = === ClickCounter wird gemountet. Yay! = === ClickCounter wurde gemountet. Anzahl: 5 👎 === ClickCounter wurde geladen. Anzahl: 8 --- PopularBar hat gemountet. upCount: 5, downCount: 8 = === ClickCounter erhält Requisiten. Nächste Requisiten: 25 👍 === ClickCounter sollte aktualisiert werden 👍 === ClickCounter aktualisiert nextProps.count: 25 nextState.clickCount: 0
Komponenten können abgemeldet und erneut bereitgestellt werden, und es kann zu Fehlern während des Lebenszyklus einer Komponente kommen.
Wenn eine Komponente nicht von ihrem Container gerendert wird, wird sie vom virtuellen DOM und der nicht bereitgestellten Komponente abgemeldet componentWillUnmount () Methode wird aufgerufen. Die PopularBar wird ihre ClickCounter-Unterkomponenten nicht rendern, wenn die Showprop falsch ist. Die App-Komponente rendert die PopularBar und übergibt die Show-Requisite basierend auf dem Kontrollkästchen.
Hier ist die App machen() Methode:
render () return ()Beliebte Bar
Wenn der Benutzer das Kontrollkästchen deaktiviert, wird die PopularBar-Ansicht immer noch gerendert, die untergeordneten Komponenten werden jedoch nicht gerendert. Hier ist der Code und die Ausgabe:
componentWillUnmount () console.log (this.props.emoji + '=== ClickCounter hebt die Bereitstellung auf :-(') Ausgabe: 👍 === ClickCounter wird abmelden :-( 👎 === ClickCounter wird abmontieren :-( Es gibt kein componentDidUnmount () Methode, weil es an dieser Stelle keine Komponente gibt.
Das componentDidCatch () Diese Methode wurde kürzlich in React 16 hinzugefügt. Sie soll einen Fehler beim Rendern unterstützen, der zuvor zu verdeckten Fehlermeldungen führte. Es ist jetzt möglich, spezielle Fehlergrenzkomponenten zu definieren, die jede untergeordnete Komponente einschließen, die Fehler auslösen kann. Die Fehlergrenzkomponente wird nur dann angezeigt, wenn der Fehler aufgetreten ist.
Reakt-Komponenten haben einen genau definierten Lebenszyklus. Mithilfe spezieller Methoden können Sie Ihre Logik unterbrechen und Aktionen ausführen, den Status auf einer sehr detaillierten Ebene steuern und sogar Fehler behandeln.
Die meiste Zeit ist dies nicht erforderlich, und Sie können Requisiten einfach herumreichen und das implementieren machen() Methode, aber es ist gut zu wissen, dass Sie in einer spezielleren Situation keine Black Box anstarren müssen.
In den letzten Jahren hat React an Popularität gewonnen. Tatsächlich gibt es auf dem Marktplatz eine Reihe von Artikeln, die zum Kauf, zur Überprüfung, zur Implementierung usw. zur Verfügung stehen. Wenn Sie nach weiteren Ressourcen rund um React suchen, zögern Sie nicht, sie herauszufinden.
