Otomatik Yeniden Çizim Sistemi

Mithril.js, hızlı renderlama için sanal DOM diffing sistemi kullanır ve ayrıca, uygulamanın renderlanması üzerinde detaylı kontrol elde etmek için çeşitli mekanizmalar sunar.

Mithril.js, doğru kullanıldığında, veri katmanında değişiklikler yapıldığında DOM'u senkronize eden bir otomatik yeniden çizim sistemi kullanır. Otomatik yeniden çizim sistemi, m.mount veya m.route'u çağırdığınızda etkinleşir (ancak uygulamanız yalnızca m.render çağrıları aracılığıyla başlatılırsa devre dışı kalır).

Otomatik yeniden çizim sistemi, belirli fonksiyonlar tamamlandıktan sonra arka planda bir yeniden çizim fonksiyonunu tetiklemekten ibarettir.

Olay İşleyicilerden Sonra

Mithril.js, bir Mithril.js görünümünde tanımlanan DOM olay işleyicilerinden sonra otomatik olarak yeniden çizim yapar:

var MyComponent = {
  view: function () {
    return m('div', { onclick: doSomething });
  },
};

function doSomething() {
  // Bu fonksiyon çalıştıktan sonra eş zamanlı olarak yeniden çizim yapılır
}

m.mount(document.body, MyComponent);

e.redraw'ı false olarak ayarlayarak belirli olaylar için otomatik yeniden çizimi devre dışı bırakabilirsiniz:

var MyComponent = {
  view: function () {
    return m('div', { onclick: doSomething });
  },
};

function doSomething(e) {
  e.redraw = false;
  // div'e tıklandığında artık bir yeniden çizim tetiklenmez
}

m.mount(document.body, MyComponent);

m.request'ten Sonra

Mithril.js, m.request tamamlandıktan sonra otomatik olarak yeniden çizim yapar:

m.request('/api/v1/users').then(function () {
  // Bu fonksiyon çalıştıktan sonra yeniden çizim gerçekleşir
});

background seçeneğini true olarak ayarlayarak belirli bir istek için otomatik yeniden çizimi devre dışı bırakabilirsiniz:

m.request('/api/v1/users', { background: true }).then(function () {
  // Yeniden çizim tetiklenmez
});

Rota Değişikliklerinden Sonra

Mithril.js, m.route.set() çağrılarından sonra ve m.route.Link kullanılarak yapılan rota değişikliklerinden sonra otomatik olarak yeniden çizim yapar.

var RoutedComponent = {
  view: function () {
    return [
      // Rota değiştiğinde asenkron olarak yeniden çizim gerçekleşir
      m(m.route.Link, { href: '/' }),
      m('div', {
        onclick: function () {
          m.route.set('/');
        },
      }),
    ];
  },
};

m.route(document.body, '/', {
  '/': RoutedComponent,
});

Mithril.js ne zaman yeniden çizim yapmaz

Mithril.js, setTimeout, setInterval, requestAnimationFrame, doğrudan Promise çözümlemeleri ve 3. taraf kütüphane olay işleyicileri (örneğin, Socket.io geri çağrıları) sonrasında yeniden çizim yapmaz. Bu durumlarda, manuel olarak m.redraw() çağırmanız gerekir.

Mithril.js, yaşam döngüsü metotlarından sonra da yeniden çizim yapmaz. UI'nın bazı bölümleri bir oninit işleyicisinden sonra yeniden çizilebilir. Ancak, bazı durumlarda UI'nın diğer bölümleri oninit işleyicisi tetiklendiğinde zaten yeniden çizilmiş olabilir. oncreate ve onupdate gibi işleyiciler, UI yeniden çizildikten sonra tetiklenir.

Bir yaşam döngüsü metodu içinde açıkça bir yeniden çizimi tetiklemeniz gerekiyorsa, asenkron bir yeniden çizimi tetiklemek için m.redraw()'ı çağırmalısınız.

function StableComponent() {
  var height = 0;

  return {
    oncreate: function (vnode) {
      height = vnode.dom.offsetHeight;
      m.redraw();
    },
    view: function () {
      return m('div', 'Bu bileşen ' + height + 'px yüksekliğinde');
    },
  };
}

Mithril.js, m.render aracılığıyla oluşturulan vnode ağaçlarını otomatik olarak yeniden çizmez. Bu, m.render ile oluşturulan şablonlarda olay değişiklikleri ve m.request çağrılarından sonra otomatik yeniden çizim olmadığı anlamına gelir. Bu nedenle, mimariniz renderlamanın ne zaman gerçekleşeceği üzerinde manuel kontrol gerektiriyorsa (Redux gibi kütüphaneleri kullanırken bazen durum böyle olabilir), m.mount yerine m.render kullanmalısınız.

m.render'ın bir vnode ağacı ve m.mount'un bir bileşen beklediğini unutmayın:

// m.render için bileşeni bir m() çağrısına sarın
m.render(document.body, m(MyComponent));

// m.mount için bileşeni sarmayın
m.mount(document.body, MyComponent);

Mithril.js, istenen yeniden çizimlerin sıklığı bir animasyon karesinden (tipik olarak yaklaşık 16ms) daha yüksekse de otomatik yeniden çizimden kaçınabilir. Bu, örneğin, onresize veya onscroll gibi hızlı tetiklenen olayları kullanırken, Mithril.js'nin gecikmeyi önlemek için yeniden çizim sayısını otomatik olarak sınırlandıracağı anlamına gelir.