render(element, vnodes)
Popis funkce
Vykreslí šablonu do DOM.
m.render(document.body, 'hello');
// <body>hello</body>Signatura
m.render(element, vnodes, redraw)
| Argument | Typ | Povinný | Popis |
|---|---|---|---|
element | Element | Ano | DOM element, který bude rodičovským uzlem pro podstrom. |
vnodes | Array<Vnode>|Vnode | Ano | Vnody, které mají být vykresleny (vnode). |
redraw | () -> any | Ne | Funkce zpětného volání, která se spustí pokaždé, když je vyvolán obslužný program událostí v podstromu. |
| returns | Vrací undefined. |
Jak to funguje
Metoda m.render(element, vnodes) převezme virtuální DOM strom (typicky generovaný pomocí funkce m() hyperscript), vygeneruje DOM strom a připojí ho k elementu. Pokud element již obsahuje DOM strom, který byl připojen prostřednictvím předchozího volání m.render(), vnodes se porovnají s předchozím stromem vnodes a existující DOM strom se upraví pouze tam, kde je to nutné, aby odrážel změny. Nezměněné DOM uzly zůstanou beze změny.
Pokud předáte volitelný argument redraw, tato funkce se vyvolá pokaždé, když je volán obslužný program událostí kdekoli v podstromu. To se používá v m.mount a m.redraw k implementaci funkce autoredraw, ale je také zpřístupněno pro pokročilejší případy použití, jako je integrace s frameworky třetích stran.
m.render je synchronní operace.
Proč virtuální DOM
Může se zdát, že generování stromu vnode při každém překreslení je neefektivní, ale ve srovnání se čtením a úpravami DOM je vytváření a porovnávání JavaScriptových datových struktur překvapivě rychlé.
Manipulace s DOM může být nákladná z několika důvodů. Střídavé čtení a zápisy mohou negativně ovlivnit výkon tím, že způsobí rychlé po sobě jdoucí překreslování prohlížeče, zatímco porovnávání virtuálních DOM stromů umožňuje dávkovat zápisy do jednoho překreslení. Výkonnostní charakteristiky operací DOM se navíc v různých implementacích liší, což ztěžuje optimalizaci 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 stabilnější výkonnostní profil. Strom vnode je navíc implementován tak, že umožňuje moderním JavaScriptovým enginům aplikovat agresivní optimalizace, jako jsou skryté třídy, pro ještě lepší výkon.
Rozdíly od jiných API metod
Metoda m.render() je interně volána funkcemi m.mount(), m.route(), m.redraw() a m.request(). Není volána po aktualizacích streamu.
Na rozdíl od m.mount() a m.route() se strom vnode vykreslený pomocí m.render() automaticky neobnovuje při událostech zobrazení, volání m.redraw() nebo volání m.request(). Jedná se o nízkoúrovňový mechanismus vhodný pro autory knihoven, kteří chtějí ručně řídit vykreslování namísto spoléhání se na integrovaný systém automatického překreslování Mithril.js.
Dalším rozdílem je, že metoda m.render očekává vnode (nebo pole vnode) jako svůj druhý parametr, zatímco m.mount() a m.route() očekávají komponenty.
Samostatné použití
var render = require("mithril/render")
Modul m.render má podobný rozsah jako knihovny pro zobrazení, jako jsou Knockout, React a Vue. Obsahuje engine pro porovnávání virtuálního DOMu s moderním algoritmem redukce vyhledávacího prostoru a recyklací DOM prvků, což se promítá do vynikajícího výkonu, a to jak z hlediska počátečního načtení stránky, tak i překreslování. Nemá žádné závislosti na jiných částech Mithril.js kromě normalizačních funkcí dostupných přes require("mithril/render/vnode") a lze jej použít jako samostatnou knihovnu.
I přes svou relativně malou velikost je modul render plně funkční a soběstačný. Podporuje vše, co byste mohli očekávat: SVG, vlastní elementy a všechny platné atributy a události - bez jakýchkoli podivných okrajových případů nebo výjimek rozlišujících malá a velká písmena. Samozřejmě také plně podporuje komponenty a metody životního cyklu.
Při používání m.render jako samostatného modulu je vhodné importovat také funkci hyperscript function pro vytváření vnode.