Was ist "Montage" in React js?

Ich höre den Begriff "Mount" zu oft, während ich ReactJS lerne. Und es scheint Lebenszyklusmethoden und Fehler in Bezug auf diesen Begriff zu geben. Was genau bedeutet Reagieren mit Montage?

Beispiele: componentDidMount() and componentWillMount()

Die Hauptaufgabe von React besteht darin, herauszufinden, wie das DOM so geändert werden kann, dass es den Komponenten entspricht, die auf dem Bildschirm gerendert werden sollen.

Reagieren Sie dazu, indem Sie "einhängen" (Knoten zum DOM hinzufügen), "aushängen" (aus dem DOM entfernen) und "aktualisieren" (Änderungen an Knoten vornehmen, die sich bereits im DOM befinden).

Wie ein Reaktionsknoten als DOM-Knoten dargestellt wird und wo und wann er im DOM-Baum angezeigt wird, wird von der API der obersten Ebene verwaltet . Schauen Sie sich das einfachste Beispiel an, um eine bessere Vorstellung davon zu bekommen, was los ist:

// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);

Was ist foound was können Sie damit machen? fooIm Moment handelt es sich um ein einfaches JavaScript-Objekt, das ungefähr so ​​aussieht (vereinfacht):

{
  type: FooComponent,
  props: {}
}

Es befindet sich derzeit nirgendwo auf der Seite, dh es ist kein DOM-Element, existiert nirgendwo im DOM-Baum und hat, abgesehen davon, dass es sich um den Knoten Element reagieren handelt, keine andere aussagekräftige Darstellung im Dokument. Es sagt nur reagieren , was muss auf dem Bildschirm sein , wenn dieses Element React gerendert wird. Es ist noch nicht "montiert".

Sie können React anweisen, es in einen DOM-Container zu "mounten", indem Sie Folgendes aufrufen:

ReactDOM.render(foo, domContainer);

Dies teilt React mit, dass es Zeit ist, fooauf der Seite anzuzeigen. React erstellt eine Instanz der FooComponentKlasse und ruft ihre renderMethode auf. Angenommen, es wird a gerendert <div />. In diesem Fall erstellt React einen divDOM-Knoten dafür und fügt ihn in den DOM-Container ein.

Dieser Vorgang des Erstellens von Instanzen und DOM-Knoten, die React-Komponenten entsprechen, und des Einfügens in das DOM wird als Mounten bezeichnet.

Beachten Sie, dass Sie normalerweise nur aufrufen ReactDOM.render(), um die Stammkomponente (n) bereitzustellen. Sie müssen die untergeordneten Komponenten nicht manuell "mounten". Jedes Mal, wenn eine übergeordnete Komponente aufgerufen setState()wird und die renderMethode besagt, dass ein bestimmtes untergeordnetes Element zum ersten Mal gerendert werden soll, "meldet" React dieses untergeordnete Element automatisch in das übergeordnete Element.

React ist ein isomorphes / universelles Gerüst. Dies bedeutet, dass es eine virtuelle Darstellung des UI-Komponentenbaums gibt, die vom tatsächlichen Rendering, das im Browser ausgegeben wird, getrennt ist. Aus der Dokumentation:

Die Reaktion ist so schnell, weil sie niemals direkt mit dem DOM spricht. React behält eine schnelle In-Memory-Darstellung des DOM bei.

Diese speicherinterne Darstellung ist jedoch nicht direkt mit dem DOM im Browser verknüpft (obwohl sie als virtuelles DOM bezeichnet wird, was ein unglücklicher und verwirrender Name für ein universelles Apps-Framework ist), und es handelt sich lediglich um ein DOM-ähnliches Daten- Struktur, die alle Hierarchien der UI-Komponenten und zusätzliche Metadaten darstellt. Virtual DOM ist nur ein Implementierungsdetail.

"Wir glauben, dass die wahren Grundlagen von React einfach Ideen von Komponenten und Elementen sind: Sie können deklarativ beschreiben, was Sie rendern möchten. Dies sind die Teile, die von all diesen verschiedenen Paketen gemeinsam genutzt werden. Die Teile von React, die für bestimmte Renderings spezifisch sind Ziele sind normalerweise nicht das, woran wir denken, wenn wir an Reagieren denken. " - Reagiere auf js Blog

Die Schlussfolgerung ist also, dass React agnostisch ist , was bedeutet, dass es ihm egal ist, was die endgültige Ausgabe ist. Es kann sich um einen DOM-Baum im Browser handeln, es kann sich um XML, native Komponenten oder JSON handeln.

"Wenn wir uns Pakete wie" React-Native "," React-Art "," React-Canvas "und" React-Three "ansehen, wird deutlich, dass die Schönheit und das Wesen von React nichts mit Browsern oder dem DOM zu tun haben." - Reagiere auf js Blog

Jetzt, da Sie wissen, wie React funktioniert, ist es einfach, Ihre Frage zu beantworten :)

Beim Mounten wird die virtuelle Darstellung einer Komponente in die endgültige Darstellung der Benutzeroberfläche (z. B. DOM oder native Komponenten) ausgegeben.

In einem Browser würde dies bedeuten, dass ein React-Element in ein tatsächliches DOM-Element (z. B. ein HTML- Div oder li- Element) im DOM-Baum ausgegeben wird. In einer nativen Anwendung würde dies bedeuten, dass ein React-Element in eine native Komponente ausgegeben wird. Sie können auch Ihren eigenen Renderer schreiben und React-Komponenten in JSON oder XML oder sogar XAML ausgeben, wenn Sie den Mut dazu haben.

So sind Montage / Demon Handler entscheidend für eine Applikation reagieren, weil Sie nur sicher , dass eine Komponente sein kann , wird Ausgang / gerendert , wenn es angebracht ist . DiecomponentDidMount Handler wird jedoch nur beim Rendern in eine tatsächliche UI-Darstellung (DOM oder native Komponenten) aufgerufen, nicht jedoch, wenn Sie in eine HTML-Zeichenfolge auf dem Server rendern renderToString, was sinnvoll ist, da die Komponente erst dann tatsächlich bereitgestellt wird , wenn sie die erreicht Browser und führt darin aus.

Und ja, Mounting ist auch ein unglücklicher / verwirrender Name, wenn Sie mich fragen. IMHO componentDidRenderund componentWillRenderwäre viel bessere Namen.

Das Mounten bezieht sich auf die Komponente in React (erstellte DOM-Knoten), die an einen Teil des Dokuments angehängt wird. Das ist es!

Wenn Sie React ignorieren, können Sie sich diese beiden nativen Funktionen als Mounting vorstellen:

replaceChild

appendChild

Welches sind wahrscheinlich die häufigsten Funktionen, die React verwendet, um intern zu mounten.

Denk an:

componentWillMount === vor dem Mounten

Und:

componentDidMount === After-Mount

https://facebook.github.io/react/docs/tutorial.html

Hier ist componentDidMount eine Methode, die von React automatisch aufgerufen wird, wenn eine Komponente gerendert wird.

Das Konzept ist, dass Sie ReactJS sagen: "Bitte nehmen Sie dieses Ding, dieses Kommentarfeld oder das sich drehende Bild oder was auch immer ich will, auf die Browserseite und setzen Sie es tatsächlich auf die Browserseite. Wenn das erledigt ist, rufen Sie an meine Funktion, an die ich gebunden bin, componentDidMountdamit ich fortfahren kann. "

componentWillMountist das Gegenteil. Es wird sofort ausgelöst, bevor Ihre Komponente gerendert wird.

Siehe auch hier https://facebook.github.io/react/docs/component-specs.html

Schließlich scheint der Begriff "mount" für react.js eindeutig zu sein. Ich denke nicht, dass es ein allgemeines Javascript-Konzept oder sogar ein allgemeines Browser-Konzept ist.

Das Mounten bezieht sich auf das anfängliche Laden der Seite, wenn Ihre React-Komponente zum ersten Mal gerendert wird. Aus der React-Dokumentation für die Montage: componentDidMount:

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

Sie können dies mit der Funktion componentDidUpdate vergleichen, die jedes Mal aufgerufen wird, wenn React rendert (mit Ausnahme des ersten Mount).

Das Hauptziel von React js ist die Erstellung wiederverwendbarer Komponenten. Komponenten sind hier die einzelnen Teile einer Webseite. In einer Webseite ist beispielsweise die Kopfzeile eine Komponente, die Fußzeile eine Komponente, eine Toastbenachrichtigung eine Komponente usw. Der Begriff "mount" gibt an, dass diese Komponenten in das DOM geladen oder gerendert werden. Dies sind viele Top-Level-APIs und Methoden, die sich damit befassen.

Zur Vereinfachung bedeutet "montiert", dass die Komponente in das DOM geladen wurde, und "nicht gemountet" bedeutet, dass die Komponenten aus dem DOM entfernt wurden.