Az automatikus újrarajzolási rendszer

A Mithril.js egy virtuális DOM diffing rendszert valósít meg a gyors rendereléshez, és emellett különféle mechanizmusokat kínál az alkalmazás renderelésének részletes szabályozásához.

Alapértelmezett használat esetén a Mithril.js egy automatikus újrarajzoló rendszert alkalmaz, amely szinkronizálja a DOM-ot, amikor változások történnek az adatokban. Az automatikus újrarajzoló rendszer akkor aktiválódik, amikor meghívja az m.mount vagy az m.route függvényt (de kikapcsolva marad, ha az alkalmazása csak m.render hívásokkal indítják el).

Az automatikus újrarajzoló rendszer lényege, hogy bizonyos függvények befejezése után a háttérben elindít egy újrarajzolási ciklust.

Eseménykezelők után

A Mithril.js automatikusan újrarajzol a nézetben definiált DOM eseménykezelők után:

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

function doSomething() {
  // A függvény futása után szinkron módon történik egy újrarajzolás
}

m.mount(document.body, MyComponent);

Kikapcsolhatja az automatikus újrarajzolást bizonyos eseményeknél az e.redraw értékét false-ra állítva.

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

function doSomething(e) {
  e.redraw = false;
  // A div elemre kattintás többé nem indít el újrarajzolást
}

m.mount(document.body, MyComponent);

m.request után

A Mithril.js automatikusan újrarajzol az m.request befejezését követően:

m.request('/api/v1/users').then(function () {
  // A függvény futása után történik egy újrarajzolás
});

Letilthatja az automatikus újrarajzolást egy adott kéréshez a background opció true értékre állításával:

m.request('/api/v1/users', { background: true }).then(function () {
  // Nem indít újrarajzolást
});

Útvonalváltozások után

A Mithril.js automatikusan újrarajzol az m.route.set() hívások után, és az útvonalváltozások során a m.route.Link használatával.

var RoutedComponent = {
  view: function () {
    return [
      // Az útvonal megváltoztatása után aszinkron módon történik egy újrarajzolás
      m(m.route.Link, { href: '/' }),
      m('div', {
        onclick: function () {
          m.route.set('/');
        },
      }),
    ];
  },
};

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

Amikor a Mithril.js nem rajzol újra

A Mithril.js nem rajzol újra a setTimeout, setInterval, requestAnimationFrame, a nyers Promise feloldások, valamint harmadik féltől származó könyvtárak eseménykezelői után. Ezekben az esetekben manuálisan kell meghívnia az m.redraw() függvényt.

A Mithril.js az életciklus metódusok után sem végez újrarajzolást. Egy oninit kezelő futása után a felhasználói felület egyes részei újrarajzolódhatnak, míg más részei már korábban újrarajzolódtak. Az olyan kezelők, mint az oncreate és az onupdate, a felhasználói felület újrarajzolása után futnak le.

Ha egy életciklus metóduson belül kifejezetten újrarajzolást szeretne indítani, hívja meg az m.redraw() függvényt, ami egy aszinkron újrarajzolást fog eredményezni.

function StableComponent() {
  var height = 0;

  return {
    oncreate: function (vnode) {
      height = vnode.dom.offsetHeight;
      m.redraw();
    },
    view: function () {
      return m('div', 'This component is ' + height + 'px tall');
    },
  };
}

A Mithril.js nem végzi automatikusan az újrarajzolást az olyan vnode fáknál, amelyeket az m.render renderel. Ez azt jelenti, hogy az m.render által renderelt sablonok esetében az események és az m.request hívások nem váltanak ki automatikus újrarajzolást. Ezért, ha az architektúrája megköveteli a renderelés időpontjának manuális vezérlését (ami néha előfordulhat olyan könyvtárak használatakor, mint a Redux), akkor az m.mount helyett az m.render függvényt kell használnia.

Ne feledje, hogy az m.render egy vnode fát vár, az m.mount pedig egy komponenst:

// Csomagolja be a komponenst egy m() hívásba az m.render számára
m.render(document.body, m(MyComponent));

// Ne csomagolja be a komponenst az m.mount számára
m.mount(document.body, MyComponent);

A Mithril.js akkor is elkerülheti az automatikus újrarajzolást, ha a kért újrarajzolások gyakorisága meghaladja az egy animációs képkocka idejét (ami általában 16 ms körül van). Ez azt jelenti például, hogy a gyorsan aktiválódó események, például az onresize vagy az onscroll használatakor a Mithril.js automatikusan szabályozza az újrarajzolások számát a késleltetések elkerülése érdekében.