mount(root, component)

Descrizione

Attiva un componente, abilitando il ridisegno automatico (autoredraw) in risposta agli eventi utente.

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

Per passare argomenti a un componente durante il montaggio, usa:

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

Firma

m.mount(element, Component)

Argomento	Tipo	Richiesto	Descrizione
element	Element	Sì	Un elemento DOM che sarà il nodo padre del sottoalbero
Component	Component|null	Sì	Il componente da renderizzare. null smonta l'albero e pulisce lo stato interno.
restituisce			Non restituisce alcun valore

Come leggere le firme

Come funziona

m.mount(element, Component), quando chiamato, renderizza il componente nell'elemento e sottoscrive la coppia (element, Component) al sottosistema di ridisegno (redraw). L'albero verrà ri-renderizzato quando vengono attivati ridisegni manuali o automatici.

Al ridisegno, il nuovo albero vDOM viene confrontato con quello vecchio, e l'albero DOM esistente viene modificato solo dove necessario per riflettere i cambiamenti. I nodi DOM invariati non vengono toccati.

Sostituire un componente

Eseguire m.mount(element, OtherComponent) dove element è un punto di montaggio corrente sostituisce il componente precedentemente montato con OtherComponent.

Smontare

Usare m.mount(element, null) su un elemento con un componente precedentemente montato per smontarlo e pulire lo stato interno di Mithril.js. Questo può essere utile per prevenire perdite di memoria quando si rimuove manualmente il nodo root dal DOM.

Montaggi senza interfaccia

In alcune situazioni avanzate, potresti voler sottoscriverti e ascoltare i ridisegni senza renderizzare nulla sullo schermo. Questo può essere fatto utilizzando un montaggio senza interfaccia, creato semplicemente invocando m.mount con un elemento che non è stato ancora aggiunto all'albero DOM attivo e inserendo tutta la logica necessaria nel componente che si sta montando. È comunque necessaria una view nel componente, anche se non deve restituire nulla di significativo e può semplicemente restituire un valore come null o undefined.

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

// Sottoscrivi il componente al ciclo di ridisegno
m.mount(elem, {
  oncreate: function () {
    // Eseguito una volta quando l'elemento viene creato
  },
  onupdate: function () {
    // Eseguito ad ogni ridisegno
  },
  onremove: function () {
    // Pulisci tutto ciò di cui hai bisogno prima che l'elemento venga rimosso
  },

  // Boilerplate necessario per il montaggio
  view: function () {},
});

// Annulla la sottoscrizione del componente
m.mount(elem, null);

Non c'è bisogno di preoccuparsi di altri punti di montaggio. Sono supportate più root e non si sovrapporranno l'uno all'altro. Puoi anche fare quanto sopra in un componente quando ti integri con un altro framework, e non sarà un problema.

Considerazioni sulle prestazioni

Potrebbe sembrare inefficiente generare un albero vnode per ogni ridisegno, ma in realtà, creare e confrontare strutture dati JavaScript è sorprendentemente meno oneroso rispetto alla lettura e alla modifica del DOM.

Toccare il DOM può essere estremamente costoso per un paio di motivi. L'alternanza di letture e scritture può influire negativamente sulle prestazioni, causando diversi ri-renderizzazioni del browser in rapida successione, mentre il confronto degli alberi virtual DOM consente di raggruppare le scritture in un unico ridisegno. Inoltre, le prestazioni delle varie operazioni DOM variano tra le implementazioni e possono essere difficili da imparare e ottimizzare per tutti i browser. Ad esempio, in alcune implementazioni, la lettura di childNodes.length ha una complessità di O(n); in alcune, la lettura di parentNode causa un ridisegno, ecc.

Al contrario, l'attraversamento di una struttura dati JavaScript presenta prestazioni molto più prevedibili e sane, e inoltre, un albero vnode è implementato in modo tale da consentire ai moderni motori JavaScript di applicare ottimizzazioni aggressive come le hidden classes per prestazioni ancora migliori.

Differenze da m.render

Un componente renderizzato tramite m.mount viene ri-renderizzato automaticamente in risposta agli eventi di visualizzazione, alle chiamate m.redraw() o alle chiamate m.request(). I vnode renderizzati tramite m.render() non si ridisegnano automaticamente.

m.mount() è adatto agli sviluppatori di applicazioni che integrano widget Mithril.js in codebase esistenti in cui il routing è gestito da un'altra libreria o framework, beneficiando comunque delle funzionalità di ridisegno automatico di Mithril.js.

m.render() è adatto agli autori di librerie che desiderano controllare manualmente il rendering (ad esempio, quando si collegano a un router di terze parti o si utilizzano librerie di data-layer di terze parti come Redux).