El sistema de redibujado automático

Mithril.js implementa un sistema de diferenciación del DOM virtual para un renderizado rápido y ofrece mecanismos para un control preciso sobre el renderizado de una aplicación.

Cuando se utiliza de forma idiomática, Mithril.js emplea un sistema de redibujado automático que sincroniza el DOM cada vez que se modifican los datos. Este sistema se activa al llamar a m.mount o m.route (pero permanece desactivado si la aplicación se inicia únicamente a través de llamadas a m.render).

El sistema de redibujado automático simplemente activa una función de renderizado en segundo plano tras la finalización de ciertas operaciones.

Después de los controladores de eventos

Mithril.js se redibuja automáticamente después de la ejecución de los controladores de eventos DOM definidos en una vista de Mithril.js:

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

function doSomething() {
  // Se produce un redibujado sincrónicamente después de que se ejecute esta función
}

m.mount(document.body, MyComponent);

Puede desactivar el redibujado automático para eventos específicos estableciendo e.redraw en false.

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

function doSomething(e) {
  e.redraw = false;
  // Ya no se activa el redibujado al hacer clic en el div
}

m.mount(document.body, MyComponent);

Después de m.request

Mithril.js se redibuja automáticamente tras la finalización de m.request:

m.request('/api/v1/users').then(function () {
  // Se produce un redibujado después de que se ejecute esta función
});

Puede desactivar el redibujado automático para una solicitud específica estableciendo la opción background en true:

m.request('/api/v1/users', { background: true }).then(function () {
  // No activa un redibujado
});

Después de los cambios de ruta

Mithril.js se redibuja automáticamente tras las llamadas a m.route.set() y los cambios de ruta realizados mediante enlaces m.route.Link.

var RoutedComponent = {
  view: function () {
    return [
      // Se produce un redibujado asincrónicamente después de que cambie la ruta
      m(m.route.Link, { href: '/' }),
      m('div', {
        onclick: function () {
          m.route.set('/');
        },
      }),
    ];
  },
};

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

Cuándo Mithril.js no se redibuja

Mithril.js no se redibuja después de setTimeout, setInterval, requestAnimationFrame, resoluciones de Promise nativas ni controladores de eventos de bibliotecas de terceros. En esos casos, debe llamar manualmente a m.redraw().

Mithril.js tampoco se redibuja después de los métodos del ciclo de vida. Es posible que algunas partes de la interfaz de usuario se redibujen tras la ejecución de un controlador oninit, mientras que otras podrían haberse redibujado previamente cuando se active un controlador oninit específico. Los controladores como oncreate y onupdate se activan después de que se haya redibujado la interfaz de usuario.

Si necesita activar explícitamente un redibujado dentro de un método del ciclo de vida, debe llamar a m.redraw(), que disparará un redibujado así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 no redibuja automáticamente los árboles de vnode renderizados mediante m.render. Esto significa que los redibujados no ocurren después de los eventos y las llamadas a m.request para las plantillas renderizadas a través de m.render. Por lo tanto, si su arquitectura requiere un control manual sobre el momento en que se realiza el renderizado (como podría ser al usar bibliotecas como Redux), debería usar m.render en lugar de m.mount.

Recuerde que m.render espera un árbol de vnode, mientras que m.mount espera un componente:

// Encapsule el componente en una llamada a m() para m.render
m.render(document.body, m(MyComponent));

// No envuelva el componente para m.mount
m.mount(document.body, MyComponent);

Mithril.js también puede evitar el redibujado automático si la frecuencia de redibujados solicitados supera la duración de un cuadro de animación (normalmente unos 16 ms). Esto significa que, por ejemplo, al usar eventos de disparo rápido como onresize u onscroll, Mithril.js limitará automáticamente la cantidad de redibujados para evitar la latencia.