Was ist der Unterschied zwischen componentWillMount und componentDidMount in ReactJS?

91

Ich habe mir die Dokumentation von Facebook unter ( React.Component ) angesehen und darin erwähnt, wie componentWillMountauf dem Client / Server componentDidMountaufgerufen wird, während sie nur auf dem Client aufgerufen wird. Was macht componentWillMountder Server?

BlueElixir
quelle

Antworten:

71

componentWillMount ist im Wesentlichen der Konstruktor. Sie können Instanzeigenschaften festlegen, die sich nicht auf das Rendern auswirken, und Daten aus einem Geschäft abrufen synchron abrufen und damit setState festlegen sowie anderen einfachen Code ohne Nebenwirkungen, den Sie beim Einrichten Ihrer Komponente ausführen müssen.

Es wird selten benötigt und überhaupt nicht mit ES6-Klassen.

Räuber
quelle
63

Die constructorMethode ist nicht die gleiche wiecomponentWillMount .

Laut dem Autor von Redux ist es riskant, Aktionen vom Konstruktor auszulösen, da dies dazu führen kann, dass der Status beim Rendern geändert wird.

Versand jedoch von componentWillMount ist jedoch in Ordnung.

von Github Ausgabe :

Dies geschieht, wenn dispatch () im Konstruktor einer Komponente einen setState () in einer anderen Komponente verursacht. React verfolgt den „aktuellen Eigentümer“ für solche Warnungen - und es wird angenommen, dass wir setState () im Konstruktor aufrufen, wenn der technische Konstruktor ein setState () in einem anderen Teil der Anwendung verursacht. Ich denke nicht, dass wir damit umgehen sollten - es ist nur React, der versucht, sein Bestes zu geben, um seinen Job zu machen. Wie Sie richtig bemerkt haben, besteht die Lösung darin, stattdessen () innerhalb von componentWillMount () zu versenden.

Liran Brimer
quelle
Es ist definitiv nicht unter allen Umständen in Ordnung, je nachdem, was gerade läuft componentXxxMount, z. B. kann Ajax in willMountProbleme verursachen.
Dave Newton
2
@ DaveNewton Ich habe nicht unter allen Umständen gesagt, dass es in Ordnung ist. Ich habe nur ein Beispiel gegeben, bei dem es einen Unterschied gibt, um zu beweisen, dass die Antwort "componentWillMount ist im Wesentlichen der Konstruktor" falsch ist. Vielen Dank für die Klarstellung
Liran Brimer
@LiranBrimer Diese Antwort wird ungenau, da componentWillMount veraltet ist und in 0.16 bzw. 0.17 nicht mehr funktioniert, insbesondere in Bezug auf "Der Versand von componentWillMount ist jedoch in Ordnung." Aussage
Brian Webster
37

Um das zu ergänzen, was FakeRainBrigand gesagt hat, componentWillMountwird es beim Rendern von React auf dem Server und auf dem Client componentDidMountaufgerufen , aber nur auf dem Client aufgerufen.

Anders Ekdahl
quelle
10
componentWillMountwird auf dem Server und dem Client aufgerufen. siehe: facebook.github.io/react/docs/…
David
1
@ DaveNewton wie? Es wurde nicht gesagt componentWillMount, dass der Kunde nicht angerufen wird
Ayush
7
@ AyushShanker IMO ist es wichtig, nicht irreführende Informationen bereitzustellen. Wenn Sie nicht explizit sind, besteht Raum für Fehlinterpretationen: Die Dokumente sind explizit. Sie haben Recht, dass es auch nicht explizit widersprüchlich ist.
Dave Newton
31

componentWillMount erfolgt vor dem INITIAL render einer Komponente ausgeführt und wird verwendet, um Requisiten zu bewerten und zusätzliche Logik basierend auf diesen zu erstellen (normalerweise auch, um den Status zu aktualisieren). Sie kann als solche auf dem Server ausgeführt werden, um das erste serverseitig gerenderte Markup zu erhalten .

componentDidMountwird NACH der Initialisierung ausgeführt, renderwenn das DOM aktualisiert wurde (aber entscheidend, BEVOR dieses DOM-Update in den Browser übertragen wird, sodass Sie alle Arten von erweiterten Interaktionen mit dem DOM selbst durchführen können). Dies kann natürlich nur im Browser selbst geschehen und tritt daher nicht als Teil von SSR auf, da der Server nur Markups und nicht das DOM selbst generieren kann. Dies erfolgt, nachdem es bei Verwendung von SSR an den Browser gesendet wurde

Erweiterte Interaktionen mit dem DOM, sagen Sie? Whaaaat ?? ... Yep - zu diesem Zeitpunkt ist es möglich, das tatsächliche Malen auf dem Bildschirm abzufangen, da das DOM aktualisiert wurde (der Benutzer das Update jedoch noch nicht im Browser gesehen hat)window.requestAnimationFrame Sie Dinge wie das tatsächliche messen und dann tun Es werden DOM-Elemente ausgegeben, an denen Sie weitere Statusänderungen vornehmen können. Dies ist besonders nützlich, wenn Sie beispielsweise auf eine Höhe eines Elements mit unbekanntem Inhalt variabler Länge animieren (da Sie jetzt den Inhalt messen und der Animation eine Höhe zuweisen können). oder um Flash-of-Content-Szenarien während einer Statusänderung zu vermeiden.

Seien Sie jedoch sehr vorsichtig, um Zustandsänderungen zu schützen, componentDid...da dies sonst zu einer Endlosschleife führen kann, da eine Zustandsänderung auch ein erneutes Rendern und damit ein weiteres componentDid...und ein und ein und ein und ein weiteres Rendering verursacht

Alechill
quelle
1
Ich glaube nicht , das Hinzufügen setStatein componentDidMountwird zu einer Endlosschleife führen.
Maddy
" Wie sonst eine Endlosschleife verursachen kann, weil eine Statusänderung auch ein erneutes Rendern und damit eine weitere KomponenteDidMount verursacht. und so weiter und so fort ", ist dies überhaupt nicht wahr. Statusänderungen führen zu einem erneuten Rendern, werden jedoch nicht componentDidMountimmer wieder aufgerufen . componentDidMount wird nur einmal aufgerufen, wenn die Komponente bereitgestellt wird.
hussain.codes
2

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

Es gibt jedoch ein "Gotcha": Ein asynchroner Aufruf zum Abrufen von Daten wird nicht zurückgegeben, bevor das Rendern erfolgt. Dies bedeutet, dass die Komponente mindestens einmal mit leeren Daten gerendert wird.

Es gibt keine Möglichkeit, das Rendern anzuhalten, um auf das Eintreffen von Daten zu warten. Sie können kein Versprechen von componentWillMount zurückgeben oder in einem setTimeout irgendwie streiten.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

Unsere Komponente hat keinen Zugriff auf die native Benutzeroberfläche (DOM usw.). Wir haben auch keinen Zugriff auf die Refs für Kinder, da diese noch nicht erstellt wurden. Mit componentWillMount () können wir die Konfiguration übernehmen, unseren Status aktualisieren und uns im Allgemeinen auf das erste Rendern vorbereiten. Dies bedeutet, dass wir Berechnungen oder Prozesse basierend auf den Prop-Werten durchführen können.

zloctb
quelle
1

Anwendungsfall für die KomponenteWillMount ()

Wenn Sie beispielsweise das Erstellungsdatum der Komponente in Ihrem Komponentenstatus beibehalten möchten, können Sie dies in dieser Methode einrichten. Beachten Sie bitte, dass der Einstellungsstatus bei dieser Methode DOM nicht erneut rendert. Dies ist wichtig zu beachten, da in den meisten Fällen, wenn wir den Status der Komponente ändern, ein erneutes Rendern ausgelöst wird.

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

Anwendungsfall für die KomponenteDidMount ()

Wenn Sie beispielsweise eine Nachrichten-App erstellt haben, die Daten zu den aktuellen Nachrichten abruft und dem Benutzer anzeigt, möchten Sie möglicherweise, dass diese Daten stündlich aktualisiert werden, ohne dass der Benutzer die Seite aktualisieren muss.

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}
Lalit Tyagi
quelle