Was ist „Mounten“ 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 React mit Mounten?

Beispiele: componentDidMount() and componentWillMount()

Die Hauptaufgabe von React besteht darin, herauszufinden, wie das DOM geändert werden kann, damit es mit dem übereinstimmt, was die Komponenten auf dem Bildschirm darstellen möchten.

React tut dies durch „Mounten“ (Hinzufügen von Knoten zum DOM), „Unmounten“ (Entfernen von Knoten aus dem DOM) und „Aktualisieren“ (Vornehmen von Änderungen an Knoten, die sich bereits im DOM befinden).

Wie ein React-Knoten als DOM-Knoten dargestellt wird und wo und wann er im DOM-Baum erscheint, wird vom verwaltet API der obersten Ebene. Um eine bessere Vorstellung davon zu bekommen, was vor sich geht, sehen Sie sich das möglichst einfache Beispiel an:

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

Also was ist foo und was kann man damit machen? fooist im Moment 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 einen React-Elementknoten handelt, keine andere sinnvolle Darstellung im Dokument. Es sagt React einfach was braucht auf dem Bildschirm sein wenn Dieses React-Element wird gerendert. 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 sagt React, dass es Zeit ist, es zu zeigen foo auf der Seite. React erstellt eine Instanz der FooComponent Klasse und nennen Sie es render Methode. Sagen wir, es macht a <div />in diesem Fall erstellt React eine div DOM-Knoten dafür und fügen Sie ihn in den DOM-Container ein.

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

Beachten Sie, dass Sie normalerweise nur anrufen würden ReactDOM.render() um die Root-Komponente(n) zu mounten. Sie müssen die untergeordneten Komponenten nicht manuell „mounten“. Jedes Mal, wenn eine übergeordnete Komponente aufruft setState()und sein render -Methode sagt, dass ein bestimmtes Kind zum ersten Mal gerendert werden soll, wird React dieses Kind automatisch in sein Elternteil “mounten”.

Reagieren ist ein isomorph/universal Rahmen. Das bedeutet, dass es eine virtuelle Darstellung des UI-Komponentenbaums gibt, die von der eigentlichen Darstellung, die sie im Browser ausgibt, getrennt ist. Aus der Dokumentation:

React ist so schnell, weil es nie direkt mit dem DOM spricht. React behält eine schnelle In-Memory-Darstellung des DOM bei.

Diese In-Memory-Darstellung ist jedoch nicht direkt an das DOM im Browser gebunden (auch wenn es als Virtual DOM bezeichnet wird, Das ist ein unglücklicher und verwirrender Name für ein universelles Apps-Framework), und es ist nur eine DOM-ähnliche Datenstruktur, die die gesamte Hierarchie der UI-Komponenten und zusätzliche Metadaten darstellt. Virtual DOM ist nur ein Implementierungsdetail.

„Wir denken, dass die wahren Grundlagen von React einfach Ideen von Komponenten und Elementen sind: in der Lage zu sein, auf deklarative Weise zu beschreiben, was Sie rendern möchten. Dies sind die Teile, die all diese verschiedenen Pakete gemeinsam haben. Die Teile von React, die für bestimmtes Rendering spezifisch sind Ziele sind normalerweise nicht das, woran wir denken, wenn wir an React denken.” – Reagieren Sie js Blog

Das Fazit ist also React ist Rendering-agnostisch, was bedeutet, dass es sich nicht um die endgültige Ausgabe kümmert. Es kann ein DOM-Baum im Browser sein, es kann XML, native Komponenten oder JSON sein.

„Wenn wir uns Pakete wie „react-native“, „react-art“, „react-canvas“ und „react-three“ ansehen, wird deutlich, dass die Schönheit und Essenz von React nichts mit Browsern oder dem DOM zu tun hat.“ – Reagieren Sie js Blog

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

Montage ist der Prozess der Ausgabe der virtuellen Darstellung einer Komponente in die endgültige UI-Darstellung (z. B. DOM oder native Komponenten).

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

Daher sind Mount-/Unmount-Handler für eine React-Anwendung von entscheidender Bedeutung, da Sie nur dann sicher sein können, dass eine Komponente ausgegeben/gerendert wird, wenn dies der Fall ist montiert. Allerdings ist die componentDidMount -Handler wird nur aufgerufen, wenn eine tatsächliche UI-Darstellung (DOM oder native Komponenten) gerendert wird, aber nicht, wenn Sie auf dem Server eine HTML-Zeichenfolge rendern renderToStringwas sinnvoll ist, da die Komponente erst tatsächlich gemountet wird, wenn sie den Browser erreicht und darin ausgeführt wird.

Und ja, Montage ist auch ein unglücklicher/verwirrender Name, wenn Sie mich fragen. meiner bescheidenen Meinung nach componentDidRender und componentWillRender wären viel bessere Namen.

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 Mounten vorstellen:

Kind ersetzen

Kind anhängen

Dies sind wahrscheinlich die häufigsten Funktionen, die React zum internen Mounten verwendet.

Denk an:

componentWillMount === before-mount

Und:

componentDidMount === after-mount

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

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

Das Konzept ist, dass Sie ReactJS sagen: „Bitte nehmen Sie dieses Ding, dieses Kommentarfeld oder sich drehende Bild oder was auch immer ich auf der Browserseite haben möchte, und legen Sie es tatsächlich auf der Browserseite ab. Wenn das erledigt ist, rufen Sie an meine Funktion, an die ich gebunden bin componentDidMount damit ich weitermachen kann.”

componentWillMount ist 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 einzigartig zu sein. Ich glaube nicht, dass es sich um ein allgemeines Javascript-Konzept oder sogar um ein allgemeines Browser-Konzept handelt.

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 anfänglichen Mounts).

Das Hauptziel von React js ist es, wiederverwendbare Komponenten zu erstellen. Komponenten sind hier die einzelnen Teile einer Webseite. Auf einer Webseite ist beispielsweise die Kopfzeile eine Komponente, die Fußzeile eine Komponente, eine Toastbenachrichtigung eine Komponente usw. Der Begriff „Mount“ sagt uns, dass diese Komponenten im DOM geladen oder gerendert werden. Dies sind viele APIs und Methoden der obersten Ebene, die sich damit befassen.

Um es einfach zu machen: Eingehängt bedeutet, dass die Komponente in das DOM geladen wurde, und nicht eingehängt bedeutet, dass die Komponente aus dem DOM entfernt wurde.