render(element, vnodes)
Leírás
Egy sablont jelenít meg a DOM-ban.
m.render(document.body, 'hello');
// <body>hello</body>Szignatúra
m.render(element, vnodes, redraw)
| Argumentum | Típus | Kötelező | Leírás |
|---|---|---|---|
element | Element | Igen | Egy DOM elem, amely a fa gyökérelemeként szolgál. |
vnodes | Array<Vnode>|Vnode | Igen | A megjelenítendő vnode-ok. |
redraw | () -> any | Nem | Egy visszahívó függvény, amely minden alkalommal aktiválódik, amikor a részfában egy eseménykezelő meghívásra kerül. |
| visszatérési érték | undefined |
Hogyan kell olvasni a szignatúrákat
Hogyan működik
Az m.render(element, vnodes) metódus egy virtuális DOM fát vesz (általában az m() hyperscript függvényen keresztül generálva), létrehoz egy DOM fát, és az element elemre csatolja. Ha az element már rendelkezik egy DOM fával, amelyet egy korábbi m.render() hívás csatolt fel, akkor a vnodes összevetésre kerül az előző vnodes fával, és a meglévő DOM fa csak ott módosul, ahol szükséges a változások tükrözéséhez. A változatlan DOM csomópontok érintetlenül maradnak.
Ezt használja az m.mount és az m.redraw az autoredraw funkcionalitás megvalósításához, de elérhető a fejlettebb felhasználási esetekhez is, mint például a harmadik féltől származó keretrendszerekkel való integráció.
Az m.render szinkron módon fut.
Miért virtuális DOM
Pazarlónak tűnhet egy vnode fa generálása minden újrarajzoláskor, de mint kiderült, a JavaScript adatstruktúrák létrehozása és összehasonlítása meglepően gyors a DOM olvasásához és módosításához képest.
A DOM manipulálása nagyon erőforrásigényes lehet több okból is. A felváltva történő olvasás és írás károsan hat a teljesítményre azáltal, hogy több böngésző újrarajzolást okoz gyors egymásutánban, míg a virtuális DOM-fák összehasonlítása lehetővé teszi az írások kötegelését egyetlen újrarajzolásba. Ezenkívül a különböző DOM műveletek teljesítményjellemzői eltérőek a megvalósítások között, és nehéz lehet megtanulni és optimalizálni azokat minden böngészőhöz. Például egyes implementációkban a childNodes.length olvasásának komplexitása O(n); egyesekben a parentNode olvasása újrarajzolást okoz, stb.
Ezzel szemben a JavaScript adatstruktúrák kezelése 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 az intenzív optimalizációk használatát, mint például a rejtett osztályok a még jobb teljesítmény érdekében.
Különbségek más API metódusoktól
Az m.render() metódust belsőleg használja az m.mount(), az m.route(), az m.redraw() és az m.request(). Nem hívják meg stream frissítések után.
Az m.mount()-tal és az m.route()-tal ellentétben az m.render()-en keresztül renderelt vnode fa nem frissül automatikusan a nézeti eseményekre, az m.redraw() hívásokra vagy az m.request() hívásokra válaszul. Ez egy alacsony szintű eszköz, amely alkalmas könyvtárszerzők számára, akik kézzel akarják irányítani a renderelést ahelyett, hogy a Mithril.js beépített automatikus újrarajzoló rendszerére támaszkodnának.
Egy másik különbség, hogy az m.render metódus egy vnode-ot (vagy vnode-ok tömbjét) várja a második paraméterként, míg az m.mount() és az m.route() komponenseket várnak.
Önálló használat
var render = require("mithril/render")
Az m.render modul a Knockout, React és Vue nézetkönyvtárakhoz hasonló. Megvalósít egy virtuális DOM diffing motort egy modern keresési tér csökkentő algoritmussal és DOM újrahasznosítással, ami a kategóriájában a legjobb teljesítményt jelenti, mind a kezdeti oldalbetöltés, mind az újrarajzolás tekintetében. Nincsenek függőségei a Mithril.js más részeire, kivéve a require("mithril/render/vnode") által elérhetővé tett normalizálást, és önálló könyvtárként is használható.
Annak ellenére, hogy viszonylag kicsi, a render modul teljesen működőképes és önellátó. Teljes körű támogatást nyújt a komponenseknek, az SVG-nek, az egyéni elemeknek, és minden érvényes attribútumnak és eseménynek - mindenféle furcsa kis- és nagybetű érzékeny szélsőséges eset vagy kivétel nélkül. Természetesen teljes körű támogatást nyújt a komponenseknek és a lifecycle metódusoknak is.
Ha az m.render-t önálló modulként használja, hasznos lehet az hyperscript függvény importálása is a renderelendő vnode-ok létrehozásához.