Lebenszyklus-Methoden

Verwendung

Komponenten und virtuelle DOM-Elemente können Lebenszyklus-Methoden (auch Hooks genannt) definieren, die zu bestimmten Zeitpunkten im Lebenszyklus eines DOM-Elements aufgerufen werden.

// Beispiel für einen Hook in einer Komponente
var ComponentWithHook = {
  oninit: function (vnode) {
    console.log('Komponente initialisieren');
  },
  view: function () {
    return 'hello';
  },
};

// Beispiel für einen Hook in einem vnode
function initializeVnode() {
  console.log('vnode initialisieren');
}

m(ComponentWithHook, { oninit: initializeVnode });

Alle Lebenszyklus-Methoden erhalten den vnode als erstes Argument. Das Schlüsselwort this verweist auf vnode.state.

Lebenszyklus-Methoden werden nur als Nebeneffekt eines m.render()-Aufrufs ausgeführt. Sie werden nicht aufgerufen, wenn das DOM außerhalb von Mithril verändert wird.

Der Lebenszyklus eines DOM-Elements

Ein DOM-Element wird typischerweise erstellt und an das Dokument angehängt. Anschließend können Attribute oder Kindknoten aktualisiert werden, wenn ein UI-Ereignis ausgelöst wird und sich Daten ändern. Schließlich kann das Element aus dem Dokument entfernt werden.

Nach dem Entfernen kann ein Element vorübergehend in einem Speicherpool aufbewahrt werden. Das Element kann später wiederverwendet werden (ein Prozess, der als DOM-Recycling bezeichnet wird). Das Recycling eines Elements vermeidet den Leistungsaufwand, der durch die Neuerstellung eines Elements entsteht, das erst kürzlich existierte.

oninit

Der oninit(vnode)-Hook wird aufgerufen, bevor ein vnode von der Virtual-DOM-Engine verarbeitet wird. oninit wird garantiert ausgeführt, bevor sein DOM-Element an das Dokument angehängt wird. Die Ausführung erfolgt auf übergeordneten vnodes vor ihren Kindknoten. Es gibt jedoch keine Garantie hinsichtlich der Existenz von Vorfahren- oder Nachkommen-DOM-Elementen. Sie sollten von der oninit-Methode aus niemals auf vnode.dom zugreifen.

Dieser Hook wird nicht aufgerufen, wenn ein Element aktualisiert wird, aber er wird aufgerufen, wenn ein Element recycelt wird.

Wie in anderen Hooks verweist das this-Schlüsselwort im oninit-Callback auf vnode.state.

Der oninit-Hook ist nützlich, um den Komponentenzustand anhand von Argumenten zu initialisieren, die über vnode.attrs oder vnode.children übergeben werden.

function ComponentWithState() {
  var initialData;
  return {
    oninit: function (vnode) {
      initialData = vnode.attrs.data;
    },
    view: function (vnode) {
      return [
        // zeigt die Daten zum Zeitpunkt der Initialisierung an:
        m('div', 'Initial: ' + initialData),
        // zeigt aktuelle Daten an:
        m('div', 'Current: ' + vnode.attrs.data),
      ];
    },
  };
}

m(ComponentWithState, { data: 'Hello' });

Sie sollten Modelldaten nicht synchron in dieser Methode ändern. Da oninit keine Garantien hinsichtlich des Status anderer Elemente gibt, werden Modelldaten, die in dieser Methode geändert werden, möglicherweise erst im nächsten Renderzyklus in allen Teilen der Benutzeroberfläche widergespiegelt.

oncreate

Der oncreate(vnode)-Hook wird aufgerufen, nachdem ein DOM-Element erstellt und an das Dokument angehängt wurde. oncreate wird garantiert am Ende des Renderzyklus ausgeführt. Daher ist es sicher, Größenangaben wie vnode.dom.offsetHeight und vnode.dom.getBoundingClientRect() von dieser Methode zu lesen.

Dieser Hook wird nicht aufgerufen, wenn ein Element aktualisiert wird.

Wie in anderen Hooks verweist das this-Schlüsselwort im oncreate-Callback auf vnode.state. DOM-Elemente, deren vnodes einen oncreate-Hook haben, werden nicht recycelt.

Der oncreate-Hook ist nützlich, um Layoutwerte zu lesen, die eine Neuzeichnung auslösen können, Animationen zu starten und Bibliotheken von Drittanbietern zu initialisieren, die einen Verweis auf das DOM-Element benötigen.

var HeightReporter = {
  oncreate: function (vnode) {
    console.log('Initialisiert mit Höhe: ', vnode.dom.offsetHeight);
  },
  view: function () {},
};

m(HeightReporter, { data: 'Hello' });

Sie sollten Modelldaten nicht synchron in dieser Methode ändern. Da oncreate am Ende des Renderzyklus ausgeführt wird, werden Modelldaten, die in dieser Methode geändert werden, erst im nächsten Renderzyklus in der Benutzeroberfläche widergespiegelt.

onupdate

Der onupdate(vnode)-Hook wird aufgerufen, nachdem ein DOM-Element aktualisiert wurde, während es an das Dokument angehängt ist. onupdate wird garantiert am Ende des Renderzyklus ausgeführt. Daher ist es sicher, Größenangaben wie vnode.dom.offsetHeight und vnode.dom.getBoundingClientRect() von dieser Methode zu lesen.

Dieser Hook wird nur aufgerufen, wenn das Element im vorangegangenen Renderzyklus vorhanden war. Er wird nicht aufgerufen, wenn ein Element erstellt oder recycelt wird.

DOM-Elemente, deren vnodes einen onupdate-Hook haben, werden nicht recycelt.

Der onupdate-Hook ist nützlich, um Layoutwerte zu lesen, die eine Neuzeichnung auslösen können, und um die Darstellung in Drittanbieter-Bibliotheken dynamisch zu aktualisieren, nachdem Modelldaten geändert wurden.

function RedrawReporter() {
  var count = 0;
  return {
    onupdate: function () {
      console.log('Bisherige Neuzeichnungen: ', ++count);
    },
    view: function () {},
  };
}

m(RedrawReporter, { data: 'Hello' });

onbeforeremove

Der onbeforeremove(vnode)-Hook wird aufgerufen, bevor ein DOM-Element vom Dokument getrennt wird. Falls eine Promise zurückgegeben wird, trennt Mithril.js das DOM-Element erst, nachdem die Promise aufgelöst wurde.

Dieser Hook wird nur auf dem DOM-Element aufgerufen, das sein parentNode verliert, aber nicht auf seinen Kindelementen.

Wie in anderen Hooks verweist das this-Schlüsselwort im onbeforeremove-Callback auf vnode.state. DOM-Elemente, deren vnodes einen onbeforeremove-Hook haben, werden nicht recycelt.

var Fader = {
  onbeforeremove: function (vnode) {
    vnode.dom.classList.add('fade-out');
    return new Promise(function (resolve) {
      setTimeout(resolve, 1000);
    });
  },
  view: function () {
    return m('div', 'Bye');
  },
};

onremove

Der onremove(vnode)-Hook wird aufgerufen, bevor ein DOM-Element aus dem Dokument entfernt wird. Wenn auch ein onbeforeremove-Hook definiert ist, wird der onremove-Hook ausgeführt, nachdem die von onbeforeremove zurückgegebene Promise aufgelöst wurde.

Dieser Hook wird auf jedem Element aufgerufen, das aus dem Dokument entfernt wird, unabhängig davon, ob es direkt von seinem übergeordneten Element getrennt wurde oder ob es ein Kind eines anderen Elements ist, das getrennt wurde.

Wie in anderen Hooks verweist das this-Schlüsselwort im onremove-Callback auf vnode.state. DOM-Elemente, deren vnodes einen onremove-Hook haben, werden nicht recycelt.

Der onremove-Hook ist nützlich, um Aufräumarbeiten durchzuführen.

function Timer() {
  var timeout = setTimeout(function () {
    console.log('Zeitüberschreitung');
  }, 1000);

  return {
    onremove: function () {
      clearTimeout(timeout);
    },
    view: function () {},
  };
}

onbeforeupdate

Der onbeforeupdate(vnode, old)-Hook wird aufgerufen, bevor ein vnode in einem Update verglichen wird. Wenn diese Funktion definiert ist und false zurückgibt, verhindert Mithril.js, dass ein Diff für den vnode und folglich für dessen Kindknoten durchgeführt wird.

Dieser Hook verhindert nicht, dass eine virtuelle DOM-Teilstruktur generiert wird, es sei denn, die Teilstruktur ist in einer Komponente gekapselt.

Wie in anderen Hooks verweist das this-Schlüsselwort im onbeforeupdate-Callback auf vnode.state.

Dieser Hook ist nützlich, um Verzögerungen bei Aktualisierungen in Fällen zu reduzieren, in denen ein übermäßig großer DOM-Baum vorhanden ist.

Anti-Patterns vermeiden

Obwohl Mithril.js flexibel ist, werden einige Codepraktiken nicht empfohlen:

Vermeiden Sie voreilige Optimierungen

Sie sollten onbeforeupdate nur als letzten Ausweg verwenden, um das Diffing zu überspringen. Vermeiden Sie die Verwendung, es sei denn, Sie haben ein spürbares Leistungsproblem.

Typischerweise lassen sich Leistungsprobleme, die über onbeforeupdate behoben werden können, auf ein großes Array von Elementen reduzieren. In diesem Kontext bedeutet "groß" typischerweise jedes Array, das eine große Anzahl von Knoten enthält. Dies kann eine breite Streuung sein (wie die berüchtigte 5000-Zeilen-Tabelle) oder ein tiefer, dichter Baum.

Wenn Sie ein Leistungsproblem haben, überlegen Sie zunächst, ob die Benutzeroberfläche eine gute Benutzererfahrung bietet, und ändern Sie sie gegebenenfalls. Es ist beispielsweise höchst unwahrscheinlich, dass ein Benutzer jemals 5000 Zeilen roher Tabellendaten durchsieben würde, und es ist höchstwahrscheinlich einfacher für einen Benutzer, eine Suchfunktion zu verwenden, die nur die obersten wenigen relevantesten Elemente zurückgibt.

Wenn eine designbasierte Lösung nicht möglich ist und Sie eine Benutzeroberfläche mit einer großen Anzahl von DOM-Elementen optimieren müssen, wenden Sie onbeforeupdate auf den übergeordneten Knoten des größten Arrays an und bewerten Sie die Leistung neu. In den allermeisten Fällen sollte eine einzelne Überprüfung ausreichen. In dem seltenen Fall, dass dies nicht der Fall ist, wiederholen Sie den Vorgang, aber Sie sollten sich zunehmend vor jeder neuen onbeforeupdate-Deklaration hüten. Mehrere onbeforeupdates sind ein Code-Geruch, der auf Priorisierungsprobleme im Entwicklungsprozess hinweist.

Vermeiden Sie es, die Optimierung auf andere Bereiche Ihrer Anwendung "nur für den Fall" anzuwenden. Denken Sie daran, dass im Allgemeinen mehr Code höhere Wartungskosten verursacht als weniger Code, und onbeforeupdate-bezogene Fehler können besonders schwer zu beheben sein, wenn Sie sich für die bedingten Überprüfungen auf die Objektidentität verlassen.

Nochmal, der onbeforeupdate-Hook sollte nur als letzter Ausweg verwendet werden.