render(element, vnodes)
Açıklama
Bir şablonu DOM'a işler.
m.render(document.body, 'hello');
// <body>hello</body>İmza
m.render(element, vnodes, redraw)
| Argüman | Tip | Gerekli | Açıklama |
|---|---|---|---|
element | Element | Evet | Alt ağacın ebeveyn düğümü olacak bir DOM öğesi. |
vnodes | Array<Vnode>|Vnode | Evet | Oluşturulacak vnode'lar. |
redraw | () -> any | Hayır | Alt ağaçtaki bir olay işleyicisi her çağrıldığında çağrılan bir geri çağırma fonksiyonu. |
| döndürür | undefined dönüş değeri. |
Nasıl Çalışır
m.render(element, vnodes) metodu, bir sanal DOM ağacını (tipik olarak m() hyperscript fonksiyonu aracılığıyla oluşturulur) alır, bir DOM ağacı oluşturur ve element üzerine yerleştirir. Eğer element, önceki bir m.render() çağrısı aracılığıyla daha önce monte edilmiş bir DOM ağacına sahipse, vnodes, önceki vnodes ağacıyla karşılaştırılır ve mevcut DOM ağacı yalnızca değişiklikleri yansıtmak için gerektiği kadar güncellenir. Değişmeyen DOM düğümlerine dokunulmaz.
İsteğe bağlı redraw argümanını iletirseniz, bu, alt ağaçtaki herhangi bir olay işleyicisi çağrıldığında çağrılır. Bu, otomatik yeniden çizim işlevini uygulamak için m.mount ve m.redraw tarafından kullanılır, ancak üçüncü taraf kütüphanelerle entegrasyon gibi daha gelişmiş kullanımlar için de sunulmuştur.
m.render eş zamanlı (senkron) çalışır.
Neden Sanal DOM
Her yeniden çizimde bir vnode ağacı oluşturmak verimsiz görünebilir, ancak JavaScript veri yapıları oluşturmak ve karşılaştırmak, DOM okuma ve değiştirme işlemlerine kıyasla şaşırtıcı derecede daha az maliyetlidir.
DOM'a dokunmak birkaç nedenden dolayı maliyetli olabilir. Okuma ve yazma işlemlerinin sıralanması, hızlı bir şekilde birden fazla tarayıcı yeniden çiziminin meydana gelmesine neden olarak performansı olumsuz etkileyebilirken, sanal DOM ağaçlarını karşılaştırmak, yazma işlemlerinin tek bir yeniden çizimde gruplanmasına olanak tanır. Ayrıca, çeşitli DOM işlemlerinin performans özellikleri tarayıcı uygulamaları arasında farklılık gösterir ve tüm tarayıcılar için öğrenilmesi ve optimize edilmesi zor olabilir. Örneğin, bazı uygulamalarda childNodes.length okumanın karmaşıklığı O(n)'dir; bazılarında parentNode okumak bir yeniden çizime neden olur, vb.
Buna karşılık, bir JavaScript veri yapısını geçmek çok daha öngörülebilir ve makul bir performans profiline sahiptir ve ek olarak, bir vnode ağacı, modern JavaScript motorlarının daha da iyi performans için gizli sınıflar gibi yoğun optimizasyonlar uygulamasına olanak sağlayacak şekilde uygulanır.
Diğer API Metotlarından Farkları
m.render() metodu içsel olarak m.mount(), m.route(), m.redraw() ve m.request() tarafından çağrılır. Ancak, akış güncellemeleri sonrasında çağrılmaz.
m.mount() ve m.route()'dan farklı olarak, m.render() aracılığıyla işlenen bir vnode ağacı, görünüm olaylarına, m.redraw() çağrılarına veya m.request() çağrılarına yanıt olarak otomatik olarak yeniden çizilmez. Mithril.js'nin yerleşik otomatik yeniden çizim sistemine güvenmektense, işlemeyi elle kontrol etmek isteyen kütüphane geliştiricileri için uygun, düşük seviyeli bir araçtır.
Bir diğer fark ise, m.render metodunun ikinci parametresi olarak bir vnode (veya bir dizi vnode) beklemesidir, oysa m.mount() ve m.route() bileşenler bekler.
Bağımsız Kullanım
var render = require("mithril/render")
m.render modülü, arayüz kütüphanelerine benzer bir kapsam sunar. Modern bir arama alanı azaltma algoritması ve DOM geri dönüşümü ile sanal bir DOM diffing motoru uygular; bu da hem ilk sayfa yüklemesi hem de yeniden işleme açısından sınıfının en iyi performansını sunar. require("mithril/render/vnode") aracılığıyla sunulan normalleştirme dışında Mithril.js'nin diğer bölümlerine bağımlılığı yoktur ve bağımsız bir kütüphane olarak kullanılabilir.
Nispeten küçük olmasına rağmen, render modülü tamamen işlevsel ve kendine yeterlidir. Bekleyebileceğiniz her şeyi destekler: SVG, özel öğeler ve tüm geçerli özellikler ve olaylar - tuhaf büyük/küçük harf duyarlı özel durumlar veya istisnalar olmadan. Elbette, bileşenleri ve yaşam döngüsü metotlarını da tam olarak destekler.
m.render'ı bağımsız bir modül olarak kullanırken, oluşturulacak vnode'lar için hyperscript fonksiyonunu da içe aktarmak faydalı olabilir.