mount(root, component)

Descripción

Activa un componente, permitiendo que se redibuje automáticamente en respuesta a eventos del usuario.

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);

Para pasar argumentos al montar un componente, use:

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

Firma

m.mount(element, Component)

Argumento	Tipo	Obligatorio	Descripción
element	Element	Sí	Un elemento DOM que será el nodo padre del subárbol.
Component	Component|null	Sí	El componente a renderizar. null desmonta el árbol y elimina el estado interno.
devuelve			No devuelve nada.

Cómo leer firmas

Cómo funciona

m.mount(element, Component), cuando se invoca, renderiza el componente en el elemento y suscribe la pareja (element, Component) al subsistema de redibujo. Ese árbol se volverá a renderizar cuando se activen los redibujos manuales o automáticos.

En el redibujo, el nuevo árbol vDOM se compara (se realiza un "diff") con el antiguo, y el árbol DOM existente se modifica solo donde es necesario para reflejar los cambios. Los nodos DOM que no cambian no se modifican.

Reemplazar un componente

Ejecutar mount(element, OtherComponent) donde element es un punto de montaje actual, reemplaza el componente previamente montado con OtherComponent.

Desmontar

Usar m.mount(element, null) en un elemento con un componente previamente montado lo desmonta y elimina el estado interno de Mithril.js. Esto puede ser útil para evitar fugas de memoria al eliminar manualmente el nodo root del DOM.

Montajes sin interfaz

En ciertas situaciones avanzadas, es posible que desee suscribirse y escuchar los redibujos sin renderizar nada en la pantalla. Esto se puede hacer usando un montaje sin interfaz, creado simplemente invocando m.mount con un elemento que no se agrega al árbol DOM activo y colocando toda su lógica útil en el componente con el que se está montando. Todavía necesita una función view en su componente, solo que no tiene que devolver nada útil y puede devolver un valor como null o undefined.

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

// Subscribe
m.mount(elem, {
  oncreate: function () {
    // Se ejecuta una vez que se añade
  },
  onupdate: function () {
    // Se ejecuta en cada redibujo
  },
  onremove: function () {
    // Limpia lo que necesites
  },

  // Boilerplate necesario
  view: function () {},
});

// Unsubscribe
m.mount(elem, null);

No es necesario preocuparse por otras raíces de montaje. Se admiten múltiples raíces y no se sobrescribirán entre sí. Incluso puede hacer lo anterior en un componente al integrarse con otro framework, y no habrá problemas.

Consideraciones de rendimiento

Podría parecer ineficiente generar un árbol vnode en cada redibujo, pero resulta que crear y comparar estructuras de datos de JavaScript es sorprendentemente económico en comparación con leer y modificar el DOM.

Manipular el DOM puede ser extremadamente costoso por varias razones. La alternancia de lecturas y escrituras puede afectar negativamente el rendimiento al provocar que se produzcan varios repintados del navegador rápidamente, mientras que la comparación de árboles DOM virtuales permite que las escrituras se agrupen en un solo repintado. Además, las características de rendimiento de varias operaciones DOM varían entre implementaciones y pueden ser difíciles de aprender y optimizar para todos los navegadores. Por ejemplo, en algunas implementaciones, leer childNodes.length tiene una complejidad de O(n); en algunos, leer parentNode provoca un repintado, etc.

Por el contrario, recorrer una estructura de datos de JavaScript tiene un perfil de rendimiento mucho más predecible y razonable, y además, un árbol vnode se implementa de tal manera que permite a los motores de JavaScript modernos aplicar optimizaciones agresivas, como clases ocultas, para un rendimiento aún mejor.

Diferencias con m.render

Un componente renderizado con m.mount se redibuja automáticamente en respuesta a eventos de la vista, llamadas a m.redraw() o llamadas a m.request(). Los vnodes renderizados a través de m.render() no lo hacen.

m.mount() es adecuado para desarrolladores de aplicaciones que integran widgets de Mithril.js en bases de código existentes donde el enrutamiento es manejado por otra biblioteca o framework, mientras que aún disfrutan de las facilidades de redibujo automático de Mithril.js.

m.render() es adecuado para autores de bibliotecas que desean controlar manualmente la renderización (por ejemplo, al conectarse a un enrutador de terceros o al usar bibliotecas de capa de datos de terceros como Redux).