O sistema de redesenho automático

Mithril.js implementa um sistema de diffing de DOM virtual para renderização rápida e, além disso, oferece vários mecanismos para obter controle granular sobre a renderização de um aplicativo.

Quando utilizado de forma idiomática, o Mithril.js emprega um sistema de redesenho automático que sincroniza o DOM sempre que alterações são feitas na camada de dados. O sistema de redesenho automático é ativado quando você chama m.mount ou m.route (mas permanece desativado se seu aplicativo for inicializado apenas por meio de chamadas a m.render).

O sistema de redesenho automático consiste em acionar uma função de renderização nos bastidores assim que certas funções são concluídas.

Após manipuladores de eventos

Mithril.js redesenha automaticamente após manipuladores de eventos DOM que são definidos em uma view do Mithril.js:

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

function doSomething() {
  // um redesenho ocorre de forma síncrona após a execução desta função
}

m.mount(document.body, MyComponent);

Você pode desativar um auto-redesenho para eventos específicos definindo e.redraw como false.

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

function doSomething(e) {
  e.redraw = false;
  // não dispara mais um redesenho quando o elemento div é clicado
}

m.mount(document.body, MyComponent);

Após m.request

Mithril.js redesenha automaticamente após a conclusão de m.request:

m.request('/api/v1/users').then(function () {
  // um redesenho ocorre após a execução desta função
});

Você pode desativar um auto-redesenho para uma requisição específica definindo a opção background como true:

m.request('/api/v1/users', { background: true }).then(function () {
  // não aciona um redesenho
});

Após mudanças de rota

Mithril.js redesenha automaticamente após chamadas a m.route.set() e após mudanças de rota por meio de links usando m.route.Link.

var RoutedComponent = {
  view: function () {
    return [
      // um redesenho acontece assincronamente após a mudança da rota
      m(m.route.Link, { href: '/' }),
      m('div', {
        onclick: function () {
          m.route.set('/');
        },
      }),
    ];
  },
};

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

Quando o Mithril.js não redesenha

Mithril.js não redesenha após setTimeout, setInterval, requestAnimationFrame, resoluções diretas de Promise e manipuladores de eventos de bibliotecas de terceiros (por exemplo, callbacks do Socket.io). Nesses casos, você deve chamar manualmente m.redraw().

Mithril.js também não redesenha após métodos de ciclo de vida. Partes da UI podem ser redesenhadas após um manipulador oninit, mas outras partes da UI podem já ter sido redesenhadas quando um determinado manipulador oninit é disparado. Gatilhos como oncreate e onupdate são acionados após a UI ter sido redesenhada.

Se você precisar acionar explicitamente um redesenho dentro de um método de ciclo de vida, você deve chamar m.redraw(), que irá acionar um redesenho assíncrono.

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 não redesenha automaticamente árvores vnode que são renderizadas via m.render. Isso significa que os redesenhos não ocorrem após mudanças de evento e chamadas a m.request para templates que foram renderizados via m.render. Assim, se sua arquitetura requer controle manual sobre quando a renderização ocorre (como pode ser o caso ao usar bibliotecas como Redux), você deve usar m.render em vez de m.mount.

Lembre-se que m.render espera uma árvore vnode, e m.mount espera um componente:

// envolva o componente em uma chamada m() para m.render
m.render(document.body, m(MyComponent));

// não envolva o componente para m.mount
m.mount(document.body, MyComponent);

Mithril.js também pode evitar o auto-redesenho se a frequência de redesenhos solicitados for maior que um frame de animação (tipicamente em torno de 16ms). Isso significa, por exemplo, que ao usar eventos de disparo rápido como onresize ou onscroll, Mithril.js irá automaticamente limitar o número de redesenhos para evitar lentidão.