mount(root, component)

Açıklama

Bir bileşeni etkinleştirir ve kullanıcı etkileşimleri sonucu otomatik olarak yeniden çizilmesini sağlar.

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

Bir bileşen bağlanırken argüman geçirmek için aşağıdaki yapıyı kullanın:

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

İmza

m.mount(element, Component)

Argüman	Tür	Gerekli	Açıklama
element	Element	Evet	Alt ağacın ebeveyn düğümü olacak bir DOM öğesi
Component	Component|null	Evet	Render edilecek olan bileşen. null değeri, ağacı kaldırır ve dahili durumu temizler.
döndürür			Herhangi bir değer döndürmez

İmzalar nasıl okunur

Nasıl Çalışır

m.mount(element, Component) çağrıldığında, bileşeni öğeye yerleştirir ve (element, Component) çiftini yeniden çizim mekanizmasına kaydeder. Bu ağaç, manuel veya otomatik yeniden çizimler tetiklendiğinde yeniden işlenir.

Yeniden çizim sırasında, yeni vDOM ağacı eskisiyle karşılaştırılır (veya "farkı alınır") ve mevcut DOM ağacı yalnızca değişiklikleri yansıtmak için gerektiğinde güncellenir. Değişmeyen DOM düğümleri değiştirilmez.

Bir Bileşeni Değiştirme

element'in zaten bir bağlama noktası olduğu durumda, mount(element, OtherComponent) çağırmak, önceden bağlanmış olan bileşeni OtherComponent ile değiştirir.

Kaldırma

Önceden bağlanmış bir bileşeni olan bir öğede m.mount(element, null) kullanmak, bileşeni kaldırır ve Mithril.js'nin dahili durumunu temizler. Bu, root düğümü DOM'dan manuel olarak kaldırıldığında bellek sızıntılarını önlemek için kullanışlıdır.

Başsız Mount İşlemleri

Bazı gelişmiş senaryolarda, ekrana hiçbir şey render etmeden yeniden çizimlere abone olmak ve bunları dinlemek isteyebilirsiniz. Bu, canlı DOM ağacına eklenmeyen bir öğeyle m.mount çağrılarak ve tüm mantığınızı bağladığınız bileşene yerleştirerek oluşturulan başsız bir mount işlemi kullanılarak yapılabilir. Bileşeninizin hala bir view fonksiyonuna ihtiyacı vardır; ancak herhangi bir şey döndürmesi gerekmez ve sadece null veya undefined gibi geçersiz bir değer döndürebilir.

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

// Abone ol
m.mount(elem, {
  oncreate: function () {
    // Bir kez eklendi
  },
  onupdate: function () {
    // Her yeniden çizimde
  },
  onremove: function () {
    // İhtiyacınız olan her şeyi temizleyin
  },

  // Gerekli şablon
  view: function () {},
});

// Abonelikten çık
m.mount(elem, null);

Diğer bağlama kökleri hakkında endişelenmenize gerek yoktur. Birden çok kök desteklenir ve birbirlerinin üzerine yazmazlar. Başka bir framework ile entegre olurken yukarıdakileri bir bileşende bile yapabilirsiniz ve bu bir sorun olmayacaktır.

Performans Değerlendirmeleri

Her yeniden çizimde bir vnode ağacı oluşturmak gereksiz gibi görünebilir, ancak JavaScript veri yapıları oluşturmak ve karşılaştırmak, DOM'u manipüle etmekten çok daha az maliyetlidir.

DOM'u manipüle etmek birkaç nedenden dolayı maliyetli olabilir. Okuma ve yazma işlemlerini değiştirmek, 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 toplanmasına olanak tanır. Ayrıca, çeşitli DOM işlemlerinin performans özellikleri 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 tutarlı bir performans karakteristiğine sahiptir ve ek olarak, bir vnode ağacı, modern JavaScript motorlarının daha da iyi performans için hidden classes gibi agresif optimizasyonlar uygulamasına olanak sağlayacak şekilde uygulanır.

m.render'dan Farklılıklar

m.mount aracılığıyla işlenen bir bileşen, görünüm olaylarına, m.redraw() veya m.request() çağrılarına yanıt olarak otomatik olarak yeniden çizilir. m.render() aracılığıyla işlenen vnode'lar yeniden çizilmez.

m.mount(), yönlendirmenin başka bir kütüphane veya framework tarafından yönetildiği mevcut kod tabanlarına Mithril.js widget'larını entegre etmek ve Mithril.js'nin otomatik yeniden çizim özelliklerinden yararlanmak isteyen uygulama geliştiricileri için uygundur.

m.render(), render işlemini manuel olarak kontrol etmek isteyen kütüphane geliştiricileri için uygundur (örneğin, üçüncü taraf bir yönlendiriciye bağlanırken veya Redux gibi üçüncü taraf veri katmanı kitaplıklarını kullanırken).