Le système de rafraîchissement automatique

Mithril.js implémente un système de différenciation du DOM virtuel pour un rendu rapide. De plus, il offre divers mécanismes pour un contrôle précis du rendu d'une application.

Lorsqu'il est utilisé de manière idiomatique, Mithril.js utilise un système de rafraîchissement automatique qui synchronise le DOM chaque fois que des modifications sont apportées à la couche de données. Ce système s'active lorsque vous appelez m.mount ou m.route (mais reste désactivé si votre application est initialisée uniquement via des appels à m.render).

Le système de rafraîchissement automatique consiste simplement à déclencher une fonction de re-rendu en arrière-plan après l'exécution de certaines fonctions.

Après les gestionnaires d'événements

Mithril.js se rafraîchit automatiquement après l'exécution des gestionnaires d'événements DOM définis dans une vue Mithril.js :

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

function doSomething() {
  // Un rafraîchissement a lieu de manière synchrone après l'exécution de cette fonction.
}

m.mount(document.body, MyComponent);

Vous pouvez désactiver le rafraîchissement automatique pour des événements spécifiques en définissant e.redraw sur false.

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

function doSomething(e) {
  e.redraw = false;
  // Ne déclenche plus de rafraîchissement quand on clique sur la div.
}

m.mount(document.body, MyComponent);

Après m.request

Mithril.js se rafraîchit automatiquement après l'exécution de m.request :

m.request('/api/v1/users').then(function () {
  // Un rafraîchissement se produit après l'exécution de cette fonction.
});

Vous pouvez désactiver le rafraîchissement automatique pour une requête spécifique en définissant l'option background sur true :

m.request('/api/v1/users', { background: true }).then(function () {
  // Ne déclenche pas de rafraîchissement.
});

Après les changements de route

Mithril.js se rafraîchit automatiquement après les appels à m.route.set() et après les changements de route via des liens utilisant m.route.Link.

var RoutedComponent = {
  view: function () {
    return [
      // Un rafraîchissement se produit de manière asynchrone après le changement de route.
      m(m.route.Link, { href: '/' }),
      m('div', {
        onclick: function () {
          m.route.set('/');
        },
      }),
    ];
  },
};

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

Quand Mithril.js ne rafraîchit pas

Mithril.js ne se rafraîchit pas après setTimeout, setInterval, requestAnimationFrame, les résolutions natives de Promise et les gestionnaires d'événements de bibliothèques tierces (par exemple, les rappels Socket.io). Dans ces cas, vous devez appeler manuellement m.redraw().

Mithril.js ne se rafraîchit pas non plus après l'exécution des méthodes de cycle de vie. Des parties de l'interface utilisateur peuvent être rafraîchies après un gestionnaire oninit, mais d'autres parties peuvent déjà l'avoir été lorsqu'un gestionnaire oninit donné se déclenche. Les gestionnaires comme oncreate et onupdate se déclenchent après que l'interface utilisateur a été rafraîchie.

Si vous devez déclencher explicitement un rafraîchissement dans une méthode de cycle de vie, vous devez appeler m.redraw(), ce qui déclenchera un rafraîchissement asynchrone.

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 ne rafraîchit pas automatiquement les arbres vnode rendus via m.render. Cela signifie que les rafraîchissements ne se produisent pas après les événements et les appels à m.request pour les modèles qui ont été rendus via m.render. Ainsi, si votre architecture nécessite un contrôle manuel du moment où le rendu se produit (comme cela peut parfois être le cas lors de l'utilisation de bibliothèques telles que Redux), vous devez utiliser m.render au lieu de m.mount.

N'oubliez pas que m.render attend un arbre vnode, et m.mount attend un composant :

// Encapsulez le composant dans un appel m() pour m.render
m.render(document.body, m(MyComponent));

// N'encapsulez pas le composant pour m.mount
m.mount(document.body, MyComponent);

Mithril.js peut également éviter le rafraîchissement automatique si la fréquence des rafraîchissements demandés est supérieure à une image d'animation (généralement autour de 16 ms). Cela signifie, par exemple, que lors de l'utilisation d'événements à déclenchement rapide comme onresize ou onscroll, Mithril.js limitera automatiquement le nombre de rafraîchissements pour éviter les saccades.