mount(root, component)

Beschreibung

Aktiviert eine Komponente und ermöglicht das automatische Neuzeichnen bei Benutzerereignissen.

var state = {
  count: 0,
  inc: function () {
    state.count++;
  },
};

var Counter = {
  view: function () {
    return m('div', { onclick: state.inc }, state.count);
  },
};

m.mount(document.body, Counter);

Um Argumente beim Mounten einer Komponente zu übergeben, verwenden Sie:

m.mount(element, {
  view: function () {
    return m(Component, attrs);
  },
});

Signatur

m.mount(element, Component)

Argument	Typ	Erforderlich	Beschreibung
element	Element	Ja	Ein DOM-Element, das der übergeordnete Knoten des Subtrees ist.
Component	Component|null	Ja	Die Komponente, die gerendert werden soll. null entfernt den Baum und bereinigt den internen Zustand.
returns			Gibt nichts zurück

So lesen Sie Signaturen

Funktionsweise

m.mount(element, Component) rendert die Komponente in das Element, wenn die Funktion aufgerufen wird, und registriert das Paar (element, Component) im Neuzeichnungs-Subsystem. Dieser Baum wird aktualisiert, wenn manuelle oder automatische Neuzeichnungen ausgelöst werden.

Beim Neuzeichnen wird der neue vDOM-Baum mit dem alten verglichen (Diff-Algorithmus), und der vorhandene DOM-Baum wird nur dort geändert, wo dies erforderlich ist, um die Änderungen widerzuspiegeln. Unveränderte DOM-Knoten werden nicht berührt.

Ersetzen einer Komponente

Wenn Sie mount(element, OtherComponent) ausführen, wobei element bereits ein Mount-Punkt ist, wird die zuvor gemountete Komponente durch OtherComponent ersetzt.

Unmounten

Die Verwendung von m.mount(element, null) für ein Element, das zuvor eine Komponente enthielt, entfernt diese und bereinigt den internen Zustand von Mithril.js. Dies kann nützlich sein, um Speicherlecks zu vermeiden, wenn der root-Knoten manuell aus dem DOM entfernt wird.

Headless Mounts

In bestimmten fortgeschritteneren Situationen kann es wünschenswert sein, Neuzeichnungen zu abonnieren und zu überwachen, ohne etwas auf dem Bildschirm zu rendern. Dies kann mit einem Headless Mount erreicht werden, der einfach durch Aufrufen von m.mount mit einem Element erstellt wird, das nicht zum Live-DOM-Baum hinzugefügt wurde. Die gesamte Logik wird dann in die Komponente eingefügt, die Sie mounten. Sie benötigen weiterhin eine view in Ihrer Komponente, aber sie muss nichts Sinnvolles zurückgeben und kann einfach einen Platzhalterwert wie null oder undefined zurückgeben.

var elem = document.createElement('div');

// Subscribe
m.mount(elem, {
  oncreate: function () {
    // Wird einmal nach dem Hinzufügen aufgerufen
  },
  onupdate: function () {
    // Wird bei jeder Neuzeichnung aufgerufen
  },
  onremove: function () {
    // Bereinigen Sie, was auch immer Sie benötigen
  },

  // Notwendiges Boilerplate
  view: function () {},
});

// Unsubscribe
m.mount(elem, null);

Sie müssen sich keine Sorgen um andere Mount-Roots machen. Mehrere Roots werden unterstützt und beeinflussen sich nicht gegenseitig. Sie können das Obige sogar in einer Komponente tun, wenn Sie sie in ein anderes Framework integrieren, und es wird kein Problem darstellen.

Performance-Überlegungen

Es mag ineffizient erscheinen, bei jeder Neuzeichnung einen vnode-Baum zu generieren, aber das Erstellen und Vergleichen von JavaScript-Datenstrukturen ist überraschend kostengünstig im Vergleich zum Lesen und Ändern des DOM.

Das Interagieren mit dem DOM kann aus mehreren Gründen sehr teuer sein. Das abwechselnde Lesen und Schreiben kann die Leistung beeinträchtigen, da mehrere Browser-Repaints in schneller Folge auftreten können, während das Vergleichen virtueller DOM-Bäume es ermöglicht, Schreibvorgänge zu einem einzigen Repaint zusammenzufassen. Außerdem variieren die Leistungsmerkmale verschiedener DOM-Operationen zwischen den Implementierungen, und es kann schwierig sein, sie für alle Browser zu erlernen und zu optimieren. Beispielsweise hat das Lesen von childNodes.length in einigen Implementierungen eine Komplexität von O(n); in einigen verursacht das Lesen von parentNode ein Repaint usw.

Im Vergleich dazu ist das Durchlaufen einer JavaScript-Datenstruktur performanter, und außerdem ist ein vnode-Baum so implementiert, dass moderne JavaScript-Engines aggressive Optimierungen wie z. B. Hidden Classes für eine noch bessere Leistung anwenden können.

Unterschiede zu m.render

Eine Komponente, die über m.mount gerendert wurde, wird als Reaktion auf Ansichts-Ereignisse, m.redraw()-Aufrufe oder m.request()-Aufrufe automatisch neu gezeichnet. Über m.render() gerenderte Vnodes tun dies nicht.

m.mount() eignet sich für Anwendungsentwickler, die Mithril.js-Widgets in bestehende Codebases integrieren, in denen das Routing von einer anderen Bibliothek oder einem anderen Framework übernommen wird, und die dennoch die automatischen Neuzeichnungsfunktionen von Mithril.js nutzen möchten.

m.render() eignet sich für Bibliotheksautoren, die das Rendern manuell steuern möchten, beispielsweise beim Hooking an einen Router eines Drittanbieters oder bei der Verwendung von Datenebenen-Bibliotheken von Drittanbietern wie Redux.