mount(root, component)

Áttekintés

Aktivál egy komponenst, lehetővé téve annak automatikus újrarajzolását felhasználói események hatására.

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

Komponens illesztésekor argumentumok átadásához használd:

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

Aláírás

m.mount(element, Component)

Argumentum	Típus	Kötelező	Leírás
element	Element	Igen	Egy DOM elem, amely a részfa szülőelemévé válik.
Component	Component|null	Igen	A renderelendő komponens. A null lecsatolja a fát és törli a belső állapotot.
visszatér			Nincs visszatérési értéke.

Hogyan kell olvasni a szignatúrákat

Működése

A m.mount(element, Component) meghívásakor a komponens renderelve lesz az adott elembe, és az (element, Component) pár feliratkozik az újrarajzoló alrendszerre. Ez a fa újra lesz renderelve, amikor manuális vagy automatikus újrarajzolások indulnak el.

Újrarajzoláskor az új vDOM fa összehasonlításra kerül (más néven "diff") a régivel, és a meglévő DOM fa csak ott módosul, ahol szükséges a változások tükrözése érdekében. A változatlan DOM csomópontok érintetlenek maradnak.

Komponens cseréje

A mount(element, OtherComponent) futtatása, ahol az element egy aktuális illesztési pont, a korábban illesztett komponenst OtherComponent-re cseréli.

Lecsatolás

A m.mount(element, null) használata egy olyan elemen, amelyen korábban egy komponens volt illesztve, lecsatolja azt és törli a Mithril.js belső állapotát. Ez hasznos lehet a memóriaszivárgások megelőzésére, ha a root csomópont manuálisan kerül eltávolításra a DOM-ból.

Fej nélküli illesztések

Bizonyos speciális esetekben szükség lehet az újrarajzolások figyelésére anélkül, hogy bármit is renderelnénk a képernyőre. Ez fej nélküli illesztéssel tehető meg, amelyet egyszerűen a m.mount meghívásával hozhat létre egy olyan elemmel, amely nincs hozzáadva az élő DOM fához, és az összes releváns logikát a komponensbe helyezi, amellyel illeszti. Továbbra is szüksége van egy view-ra a komponensben, de nem kell semmi hasznosat visszaadnia, visszaadhat egy tetszőleges értéket, például null-t vagy undefined-et.

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

// Feliratkozás
m.mount(elem, {
  oncreate: function () {
    // hozzáadáskor
  },
  onupdate: function () {
    // minden újrarajzoláskor
  },
  onremove: function () {
    // takarítson el mindent, amire szüksége van
  },

  // Szükséges boilerplate
  view: function () {},
});

// Leiratkozás
m.mount(elem, null);

Nem kell aggódnia a többi illesztési gyökér miatt. Több gyökér is támogatott, és nem fognak egymásra hatni. A fentieket akár egy komponensben is megteheti, amikor egy másik keretrendszerrel integrálódik, és ez nem fog problémát okozni.

Teljesítmény

Pazarlónak tűnhet minden újrarajzoláskor egy vnode fát generálni, de mint kiderült, a JavaScript adatstruktúrák létrehozása és összehasonlítása meglepően olcsó a DOM olvasásához és módosításához képest.

A DOM manipulálása rendkívül költséges lehet több okból is. Az olvasások és írások váltakozása hátrányosan befolyásolhatja a teljesítményt, mivel több böngészőbeli újrafestést vált ki gyors egymásutánban, míg a virtuális DOM fák összehasonlítása lehetővé teszi az írások egyetlen újrafestésbe való csoportosítását. Ezenfelül a DOM műveletek teljesítménye implementációfüggő, ezért nehéz lehet azokat minden böngészőre optimalizálni. Például egyes implementációkban a childNodes.length olvasásának bonyolultsága O(n); egyesekben a parentNode olvasása újrafestést okoz stb.

Ezzel szemben egy JavaScript adatstruktúra bejárása sokkal kiszámíthatóbb és ésszerűbb teljesítményprofilt mutat, ráadásul egy vnode fa úgy van megvalósítva, hogy lehetővé tegye a modern JavaScript motorok számára a rejtett osztályok alkalmazását a további teljesítménynövelés érdekében.

Különbségek az m.render függvényhez képest

A m.mount segítségével renderelt komponens automatikusan újrarajzol a nézeti eseményekre, a m.redraw() hívásokra vagy a m.request() hívásokra válaszul. A m.render() segítségével renderelt vnode-ok nem.

Az m.mount() ideális választás alkalmazásfejlesztők számára, akik Mithril.js widgeteket integrálnak meglévő kódbázisokba, ahol az útválasztást egy másik könyvtár vagy keretrendszer kezeli. Így továbbra is kihasználhatják a Mithril.js automatikus újrarajzolási funkcióit.

Az m.render() alkalmas könyvtárszerzők számára, akik manuálisan szeretnék vezérelni a renderelést, például harmadik féltől származó útválasztókhoz vagy adatrészleg könyvtárakhoz (mint például a Redux) való csatlakozáskor.