mount(root, component)

Descrição

Ativa um componente, permitindo que ele seja atualizado automaticamente em resposta a eventos do usuário.

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 passar argumentos ao montar um componente, use:

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

Assinatura

m.mount(element, Component)

Parâmetro	Tipo	Obrigatório	Descrição
element	Element	Sim	Um elemento DOM que será o nó pai da subárvore DOM.
Component	Component|null	Sim	O componente a ser renderizado. null desmonta a árvore e limpa o estado interno.
retorna			Não retorna nenhum valor.

Como ler assinaturas

Como funciona

m.mount(element, Component), quando chamado, renderiza o componente no elemento e registra o par (element, Component) no subsistema de atualização. Essa árvore será renderizada novamente quando atualizações manuais ou automáticas forem acionadas.

Na atualização, a nova árvore vDOM é comparada com a antiga, e a árvore DOM existente é modificada apenas onde necessário para refletir as mudanças. Os nós DOM inalterados não são modificados.

Substituir um componente

Chamar mount(element, OtherComponent) onde element é um ponto de montagem existente substitui o componente previamente montado por OtherComponent.

Desmontar

Chamar m.mount(element, null) em um elemento que possui um componente montado remove o componente e limpa o estado interno do Mithril.js. Isso pode ser útil para evitar vazamentos de memória ao remover o nó root manualmente do DOM.

Montagens sem interface

Em certas situações mais avançadas, você pode querer se registrar para receber notificações de atualizações sem renderizar nada na tela. Isso pode ser feito usando uma montagem sem interface, criada simplesmente invocando m.mount com um elemento que não foi adicionado à árvore DOM ativa e colocando toda a sua lógica útil no componente que você está montando. Você ainda precisa de uma view no seu componente, só que ela não precisa retornar nada útil e pode simplesmente retornar um valor como null ou undefined.

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

// Registrar
m.mount(elem, {
  oncreate: function () {
    // Executa uma vez quando o elemento é adicionado
  },
  onupdate: function () {
    // Executa em cada atualização
  },
  onremove: function () {
    // Realize a limpeza necessária
  },

  // Boilerplate necessário
  view: function () {},
});

// Cancelar registro
m.mount(elem, null);

Não há necessidade de se preocupar com outras raízes de montagem. Várias raízes são suportadas e não interferirão entre si. Você pode até fazer o acima em um componente ao integrar com outro framework, e não será um problema.

Considerações de desempenho

Pode parecer ineficiente gerar uma árvore vnode a cada atualização, mas criar e comparar estruturas de dados JavaScript é surpreendentemente mais rápido do que ler e modificar o DOM.

Tocar no DOM pode ser extremamente custoso por alguns motivos. Alternar leituras e escritas pode afetar adversamente o desempenho, fazendo com que vários repaints do navegador ocorram em rápida sucessão, enquanto comparar árvores de DOM virtual permite que as escritas sejam agrupadas em um único repaint. Além disso, as características de desempenho de várias operações DOM variam entre as implementações e podem ser difíceis de aprender e otimizar para todos os navegadores. Por exemplo, em algumas implementações, ler childNodes.length tem uma complexidade de O(n); em algumas, ler parentNode causa um repaint, etc.

Em contraste, percorrer uma estrutura de dados JavaScript tem um perfil de desempenho muito mais previsível e razoável e, além disso, uma árvore vnode é implementada de forma que permite que os mecanismos JavaScript modernos apliquem otimizações agressivas, como hidden classes para um desempenho ainda melhor.

Diferenças de m.render

Um componente renderizado via m.mount atualiza automaticamente em resposta a eventos de visualização, chamadas m.redraw() ou chamadas m.request(). Vnodes renderizados via m.render() não.

m.mount() é adequado para desenvolvedores de aplicativos que integram widgets Mithril.js em códigos existentes onde o roteamento é tratado por outra biblioteca ou framework, enquanto ainda desfrutam das facilidades de atualização automática do Mithril.js.

m.render() é adequado para autores de bibliotecas que desejam controlar manualmente a renderização (por exemplo, ao conectar a um roteador de terceiros ou usar bibliotecas de camada de dados de terceiros como Redux).