Systém automatického překreslování (redraw)

Mithril.js implementuje systém porovnávání virtuálního DOM pro rychlé vykreslování a nabízí různé mechanismy pro detailní kontrolu nad procesem překreslování aplikace.

Při standardním použití Mithril.js využívá systém automatického překreslování, který synchronizuje DOM při každé změně dat. Tento systém se aktivuje voláním m.mount nebo m.route (ale zůstává deaktivován, pokud je aplikace spuštěna pouze pomocí m.render).

Systém automatického překreslování funguje tak, že na pozadí spouští funkci překreslení po dokončení určitých operací.

Po obslužných funkcích událostí

Mithril.js automaticky překresluje po událostech DOM obsluhovaných v rámci komponent Mithril.js:

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

function doSomething() {
  // překreslení proběhne synchronně po dokončení této funkce
}

m.mount(document.body, MyComponent);

Automatické překreslení pro konkrétní událost můžete zakázat nastavením vlastnosti e.redraw na false.

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

function doSomething(e) {
  e.redraw = false;
  // po kliknutí na div se překreslení nespustí
}

m.mount(document.body, MyComponent);

Po m.request

Mithril.js automaticky překresluje po dokončení volání m.request:

m.request('/api/v1/users').then(function () {
  // po spuštění této funkce dojde k překreslení
});

Automatické překreslení pro konkrétní požadavek můžete zakázat nastavením parametru background na true:

m.request('/api/v1/users', { background: true }).then(function () {
  // překreslení se nespustí
});

Po změnách routy

Mithril.js automaticky překresluje po voláních m.route.set() a po změnách routy prostřednictvím odkazů pomocí m.route.Link.

var RoutedComponent = {
  view: function () {
    return [
      // po změně trasy se asynchronně provede překreslení
      m(m.route.Link, { href: '/' }),
      m('div', {
        onclick: function () {
          m.route.set('/');
        },
      }),
    ];
  },
};

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

Kdy Mithril.js nepřekresluje

Mithril.js nepřekresluje po setTimeout, setInterval, requestAnimationFrame, nativním splněním Promise a obslužných rutinách událostí třetích stran (např. zpětná volání Socket.io). V těchto případech musíte ručně zavolat m.redraw().

Mithril.js také nepřekresluje po metodách životního cyklu komponenty. Části uživatelského rozhraní mohou být překresleny po obslužné rutině oninit, ale jiné části uživatelského rozhraní již mohly být překresleny, když se daná obslužná rutina oninit spustí. Obslužné rutiny oncreate a onupdate se spouštějí až po překreslení uživatelského rozhraní.

Pokud potřebujete explicitně spustit překreslení v rámci metody životního cyklu, měli byste zavolat m.redraw(), což spustí asynchronní překreslení.

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');
    },
  };
}

Mithril.js automaticky nepřekresluje vnode stromy vykreslené pomocí m.render. To znamená, že k překreslení nedochází po změnách událostí a voláních m.request pro šablony vykreslené pomocí m.render. Pokud tedy vaše architektura vyžaduje ruční kontrolu nad překreslováním (například při použití knihoven jako Redux), použijte m.render místo m.mount.

Pamatujte, že m.render očekává strom vnode, zatímco m.mount očekává komponentu:

// zabalte komponentu do volání m() pro m.render
m.render(document.body, m(MyComponent));

// nezabalujte komponentu pro m.mount
m.mount(document.body, MyComponent);

Mithril.js může potlačit automatické překreslování, pokud je frekvence požadovaných překreslení vyšší než frekvence jedné animační smyčky (obvykle cca 16 ms). To znamená například, že při použití rychle spouštěných událostí, jako je onresize nebo onscroll, Mithril.js automaticky omezí počet překreslení, aby se zabránilo zpoždění.