Il sistema di aggiornamento automatico

Mithril.js implementa un sistema di confronto del DOM virtuale per un rendering veloce e offre vari meccanismi per ottenere un controllo preciso sull'aggiornamento di un'applicazione.

Quando utilizzato secondo le convenzioni, Mithril.js utilizza un sistema di aggiornamento automatico che sincronizza il DOM ogni volta che vengono apportate modifiche ai dati. Questo sistema si attiva quando si chiama m.mount o m.route (ma rimane disabilitato se l'app viene inizializzata solo tramite chiamate a m.render).

Il sistema di aggiornamento automatico consiste semplicemente nell'attivare una funzione di ridisegno in background al termine di determinate operazioni.

Dopo gli event handler

Mithril.js esegue automaticamente un aggiornamento dopo i gestori di eventi DOM definiti in una vista di Mithril.js:

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

function doSomething() {
  // un aggiornamento avviene in modo sincrono dopo l'esecuzione di questa funzione
}

m.mount(document.body, MyComponent);

È possibile disabilitare l'aggiornamento automatico per eventi specifici impostando e.redraw su false.

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

function doSomething(e) {
  e.redraw = false;
  // non attiva più il ridisegno quando si fa clic sul div
}

m.mount(document.body, MyComponent);

Dopo m.request

Mithril.js esegue automaticamente un aggiornamento al completamento di m.request:

m.request('/api/v1/users').then(function () {
  // un aggiornamento avviene dopo che questa funzione è stata eseguita
});

È possibile disabilitare l'aggiornamento automatico per una specifica richiesta impostando l'opzione background su true:

m.request('/api/v1/users', { background: true }).then(function () {
  // non attiva un aggiornamento
});

Dopo le modifiche di percorso

Mithril.js esegue automaticamente un aggiornamento dopo le chiamate a m.route.set() e dopo le modifiche di percorso tramite link utilizzando m.route.Link.

var RoutedComponent = {
  view: function () {
    return [
      // un aggiornamento avviene in modo asincrono dopo la modifica del percorso
      m(m.route.Link, { href: '/' }),
      m('div', {
        onclick: function () {
          m.route.set('/');
        },
      }),
    ];
  },
};

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

Quando Mithril.js non aggiorna

Mithril.js non esegue aggiornamenti automatici dopo setTimeout, setInterval, requestAnimationFrame, risoluzioni dirette di Promise e gestori di eventi di librerie di terze parti (ad es. callback di Socket.io). In questi casi, è necessario chiamare manualmente m.redraw().

Mithril.js inoltre non aggiorna dopo l'esecuzione dei metodi del ciclo di vita. Alcune parti dell'interfaccia utente potrebbero essere aggiornate dopo l'esecuzione di oninit, mentre altre potrebbero esserlo già state quando viene attivato un determinato gestore oninit. I gestori come oncreate e onupdate vengono attivati dopo che l'interfaccia utente è stata aggiornata.

Se è necessario attivare esplicitamente un aggiornamento all'interno di un metodo del ciclo di vita, è necessario chiamare m.redraw(), che attiverà un aggiornamento asincrono.

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 non aggiorna automaticamente gli alberi vnode che vengono renderizzati tramite m.render. Ciò significa che gli aggiornamenti non si verificano dopo le modifiche degli eventi e le chiamate a m.request per i template che sono stati renderizzati tramite m.render. Pertanto, se la tua architettura richiede il controllo manuale su quando si verifica il rendering (come può accadere a volte quando si utilizzano librerie come Redux), dovresti utilizzare m.render invece di m.mount.

Ricorda che m.render si aspetta un albero vnode, mentre m.mount si aspetta un componente:

// racchiudi il componente in una chiamata m() per m.render
m.render(document.body, m(MyComponent));

// non racchiudere il componente per m.mount
m.mount(document.body, MyComponent);

Mithril.js può anche evitare l'aggiornamento automatico se la frequenza degli aggiornamenti richiesti è superiore a un frame di animazione (in genere circa 16 ms). Ciò significa, ad esempio, che quando si utilizzano eventi ad alta frequenza come onresize o onscroll, Mithril.js regolerà automaticamente il numero di aggiornamenti per evitare rallentamenti.