mount(root, component)

Popis funkce

Aktivuje komponentu a umožňuje její automatické překreslování v reakci na uživatelské události.

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

Pro předání argumentů komponentě při připojování použijte následující syntaxi:

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

Signatura

m.mount(element, Component)

Argument	Typ	Povinný	Popis
element	Element	Ano	DOM element, který bude rodičovským uzlem pro podstrom komponenty.
Component	Component|null	Ano	Komponenta k vykreslení. null odpojí strom komponenty a vyčistí interní stav.
returns			Nic nevrací

Jak číst signatury

Princip fungování

m.mount(element, Component) při zavolání vykreslí komponentu do zadaného elementu a uloží si pár (element, Component) v subsystému překreslování. Tento strom komponenty se automaticky překreslí, když jsou spuštěny manuální nebo automatické překreslení.

Při překreslení se nový vDOM strom porovná (nebo "diffuje") se starým a existující DOM strom se upraví pouze v místech, kde je to nutné, aby reflektoval změny. Nezměněné DOM uzly zůstanou beze změny.

Nahrazení komponenty

Volání mount(element, OtherComponent), kde element je stávající bod připojení, nahradí dříve připojenou komponentu komponentou OtherComponent.

Odpojení

Použití m.mount(element, null) na element, ke kterému byla dříve připojena komponenta, ji odpojí a vyčistí interní stav Mithril.js. To je užitečné pro prevenci úniku paměti, pokud ručně odstraňujete kořenový uzel (root) z DOM.

Připojení bez vykreslování

V pokročilejších případech můžete chtít odebírat a reagovat na překreslování, aniž byste cokoliv vykreslovali na obrazovku. Toho lze dosáhnout pomocí bezhlavého připojení, které vytvoříte zavoláním m.mount s elementem, který není připojen k živému DOM stromu, a vložením veškeré logiky do připojované komponenty. Vaše komponenta stále potřebuje metodu view, ale ta nemusí vracet nic užitečného a může vracet například null nebo undefined.

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

// Subscribe
m.mount(elem, {
  oncreate: function () {
    // Voláno po přidání elementu do DOM
  },
  onupdate: function () {
    // Voláno při každém překreslení
  },
  onremove: function () {
    // Provedení úklidu
  },

  // Nezbytný základ
  view: function () {},
});

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

Není třeba se obávat kolize s jinými kořenovými body připojení. Je podporováno více kořenů a nebudou si navzájem překážet. Výše uvedené můžete dokonce provést v komponentě při integraci s jiným frameworkem a nebude to problém.

Dopad na výkon

Generování vnode stromu se může zdát zbytečné při každém překreslení, ale vytváření a porovnávání datových struktur JavaScriptu je překvapivě nenáročné ve srovnání se čtením a úpravou DOM.

Manipulace s DOM může být extrémně nákladná z několika důvodů. Střídavé čtení a zápisy mohou negativně ovlivnit výkon, protože způsobují opakované překreslování prohlížeče. Porovnávání virtuálních DOM stromů naopak umožňuje seskupit zápisy do jednoho překreslení. Výkonnostní charakteristiky různých DOM operací se navíc liší mezi implementacemi a může být obtížné je naučit se a optimalizovat pro všechny prohlížeče. Například v některých implementacích má čtení childNodes.length složitost O(n); v některých způsobuje čtení parentNode překreslení atd.

Naopak, procházení javascriptových datových struktur má mnohem předvídatelnější a rozumnější výkonnostní profil a navíc je vnode strom implementován takovým způsobem, který umožňuje moderním JavaScriptovým enginům aplikovat agresivní optimalizace, jako jsou skryté třídy, pro ještě lepší výkon.

Rozdíly oproti m.render

Komponenta vykreslená pomocí m.mount se automaticky překresluje v reakci na události zobrazení a volání m.redraw() nebo m.request(). Vnody vykreslené pomocí m.render() se automaticky nepřekreslují.

m.mount() je vhodný pro vývojáře aplikací, kteří integrují widgety Mithril.js do stávajících kódových základen, kde směrování řeší jiná knihovna nebo framework. Díky tomu mohou využívat automatické překreslování Mithril.js.

m.render() je vhodný pro autory knihoven, kteří chtějí ručně řídit vykreslování (např. při integraci se směrovačem třetí strany nebo při používání knihoven třetích stran pro datovou vrstvu, jako je Redux).