mount(root, component)

Description

Active un composant, lui permettant de se redessiner automatiquement en réponse aux interactions de l'utilisateur.

var state = {
  count: 0,
  inc: function () {
    state.count++;
  },
};

var Counter = {
  view: function () {
    return m('div', { onclick: state.inc }, state.count);
  },
};

m.mount(document.body, Counter);

Pour passer des arguments lors du montage d'un composant, utilisez :

m.mount(element, {
  view: function () {
    return m(Component, attrs);
  },
});

Signature

m.mount(element, Component)

Argument	Type	Required	Description
element	Element	Yes	Un élément DOM qui sera le nœud parent du sous-arbre DOM.
Component	Component|null	Yes	Le composant à afficher. null permet de démonter l'arbre et de nettoyer l'état interne.
returns			Ne retourne rien.

Comment lire les signatures

Fonctionnement

m.mount(element, Component) affiche le composant dans l'élément spécifié. Il associe également la paire (element, Component) au système de redessin. L'arbre sera redessiné lorsque des redessins manuels ou automatiques sont déclenchés.

Lors du redessin, le nouvel arbre vDOM est comparé (ou "différencié") à l'ancien. L'arbre DOM existant est ensuite modifié uniquement là où cela est nécessaire pour refléter les changements. Les nœuds DOM inchangés ne sont pas modifiés.

Remplacer un composant

Si element est un point de montage existant, l'appel à mount(element, OtherComponent) remplace le composant précédemment monté par OtherComponent.

Démonter

L'utilisation de m.mount(element, null) sur un élément avec un composant précédemment monté le démonte et nettoie l'état interne de Mithril.js. Cela peut être utile pour éviter les fuites de mémoire lors de la suppression manuelle du nœud root du DOM.

Montages sans interface graphique

Dans certains cas avancés, vous pouvez souhaiter vous abonner et écouter les redessins sans afficher quoi que ce soit à l'écran. Cela peut être réalisé en utilisant un montage sans interface graphique, simplement en invoquant m.mount avec un élément qui n'est pas ajouté à l'arbre DOM en direct et en plaçant toute votre logique dans le composant avec lequel vous effectuez le montage. Vous avez toujours besoin d'une fonction view dans votre composant, mais elle n'a pas besoin de retourner quoi que ce soit d'utile et peut simplement retourner une valeur nulle comme null ou undefined.

var elem = document.createElement('div');

// S'abonner
m.mount(elem, {
  oncreate: function () {
    // une fois ajouté
  },
  onupdate: function () {
    // à chaque redessin
  },
  onremove: function () {
    // nettoyer ce qui est nécessaire
  },

  // Nécessaire
  view: function () {},
});

// Se désabonner
m.mount(elem, null);

Il n'est pas nécessaire de s'inquiéter des autres points de montage. Plusieurs points de montage sont pris en charge et ils n'entreront pas en conflit. Vous pouvez même effectuer l'opération ci-dessus dans un composant lors de l'intégration avec un autre framework, et cela ne posera pas de problème.

Considérations de performance

La génération d'un arbre vnode à chaque redessin peut sembler inefficace. Cependant, la création et la comparaison de structures de données JavaScript sont étonnamment peu coûteuses par rapport aux opérations de lecture et de modification du DOM.

Les opérations sur le DOM peuvent être extrêmement coûteuses pour plusieurs raisons. L'alternance des lectures et des écritures peut nuire aux performances en provoquant plusieurs repeints du navigateur en succession rapide, alors que la comparaison des arbres DOM virtuels permet de regrouper les écritures en un seul repeint. De plus, les caractéristiques de performance des diverses opérations DOM varient d'une implémentation à l'autre et peuvent être difficiles à appréhender et à optimiser pour tous les navigateurs. Par exemple, dans certaines implémentations, la lecture de childNodes.length a une complexité de O(n) ; dans certaines, la lecture de parentNode provoque un repeint, etc.

En revanche, le parcours d'une structure de données JavaScript a des caractéristiques de performance bien plus prévisibles et stables, et de plus, un arbre vnode est implémenté de manière à permettre aux moteurs JavaScript modernes d'appliquer des optimisations agressives telles que les classes invisibles afin d'améliorer encore les performances.

Différences avec m.render

Un composant rendu via m.mount se redessine automatiquement en réponse aux événements de la vue, aux appels m.redraw() ou aux appels m.request(). Les vnodes rendus via m.render() ne le font pas.

m.mount() est adapté aux développeurs d'applications qui intègrent des widgets Mithril.js dans des bases de code existantes. Il permet de profiter du système de redessin automatique de Mithril.js, même lorsque le routage est géré par une autre bibliothèque ou un autre framework.

m.render() est adapté aux auteurs de bibliothèques qui souhaitent contrôler manuellement le rendu (par exemple, lors de la connexion à un routeur tiers ou de l'utilisation de bibliothèques de couches de données tierces comme Redux).