Was ist der Unterschied zwischen componentWillMount und componentDidMount in ReactJS?

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?

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.

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.

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.

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

Gemäß der Dokumentation ( https://facebook.github.io/react/docs/react-component.html) )

Methoden mit dem Präfix will werden aufgerufen, bevor etwas passiert und

Methoden mit dem Präfix did werden direkt nach dem Ereignis aufgerufen .

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.

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);
}