mount(root, component)

Opis

Aktywuje komponent, umożliwiając jego automatyczne odświeżanie w odpowiedzi na interakcje użytkownika.

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

Aby przekazać argumenty do komponentu podczas montowania, użyj:

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

Sygnatura

m.mount(element, Component)

Argument	Typ	Wymagany	Opis
element	Element	Tak	Element DOM, który będzie węzłem nadrzędnym dla renderowanego poddrzewa.
Component	Component|null	Tak	Komponent do wyrenderowania. Użycie null odmontowuje drzewo i czyści stan wewnętrzny.
zwraca			Funkcja nie zwraca żadnej wartości.

Jak czytać sygnatury

Jak to działa

m.mount(element, Component) renderuje komponent do wskazanego elementu i rejestruje parę (element, Component) w systemie odświeżania. Drzewo DOM zostanie ponownie wyrenderowane podczas ręcznego lub automatycznego odświeżania.

Podczas odświeżania, nowe drzewo vDOM (wirtualny DOM) jest porównywane (lub "różnicowane") ze starym, a istniejące drzewo DOM jest modyfikowane tylko w miejscach, gdzie jest to konieczne, aby odzwierciedlić zmiany. Niezmienione węzły DOM pozostają nietknięte.

Zastępowanie komponentu

Wywołanie mount(element, OtherComponent), gdzie element jest aktualnym punktem montowania, zastępuje wcześniej zamontowany komponent OtherComponent.

Odmontowywanie

Użycie m.mount(element, null) na elemencie, który ma już zamontowany komponent, odmontowuje go i czyści stan wewnętrzny Mithril.js. Jest to przydatne w zapobieganiu wyciekom pamięci, gdy ręcznie usuwasz węzeł root z DOM.

Montowanie bez renderowania

W zaawansowanych scenariuszach możesz chcieć subskrybować i nasłuchiwać odświeżania bez renderowania czegokolwiek na ekranie. Można to osiągnąć poprzez montowanie bez renderowania, wywołując m.mount z elementem, który nie jest dodany do aktywnego drzewa DOM, i umieszczając całą logikę w montowanym komponencie. Komponent musi posiadać metodę view, która może zwracać null lub undefined.

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

// Subskrybuj
m.mount(elem, {
  oncreate: function () {
    // Wywoływane raz, po dodaniu
  },
  onupdate: function () {
    // Wywoływane przy każdym ponownym rysowaniu
  },
  onremove: function () {
    // Wyczyść zasoby
  },

  // Wymagany szablon
  view: function () {},
});

// Zakończ subskrypcję
m.mount(elem, null);

Nie musisz się martwić o konflikty z innymi punktami montowania. Obsługiwane jest wiele punktów montowania i nie będą one ze sobą kolidować. Możesz nawet użyć powyższego kodu w komponencie podczas integracji z innym frameworkiem i nie spowoduje to problemów.

Aspekty wydajnościowe

Generowanie drzewa vnode przy każdym odświeżeniu może wydawać się nieefektywne, ale tworzenie i porównywanie struktur danych JavaScript jest zaskakująco tanie w porównaniu z odczytywaniem i modyfikowaniem DOM.

Interakcje z DOM mogą być kosztowne z kilku powodów. Naprzemienne odczyty i zapisy mogą negatywnie wpływać na wydajność, powodując wielokrotne odświeżanie przeglądarki w krótkim czasie, podczas gdy porównywanie wirtualnych drzew DOM pozwala na łączenie zapisów w jedno odświeżenie. Ponadto, wydajność różnych operacji DOM różni się w zależności od implementacji i może być trudna do optymalizacji dla wszystkich przeglądarek. Na przykład, w niektórych implementacjach odczyt childNodes.length ma złożoność O(n); w niektórych odczyt parentNode powoduje odświeżenie, itp.

Z drugiej strony, operacje na strukturach danych JavaScript mają bardziej przewidywalny i rozsądny profil wydajności, a drzewo vnode jest zaimplementowane w sposób, który umożliwia nowoczesnym silnikom JavaScript stosowanie agresywnych optymalizacji, takich jak ukryte klasy, co dodatkowo poprawia wydajność.

Różnice w stosunku do m.render

Komponent renderowany za pomocą m.mount automatycznie się odświeża w odpowiedzi na zdarzenia w widoku, wywołania m.redraw() lub wywołania m.request(). Vnode renderowane za pomocą m.render() nie posiadają tej funkcjonalności.

m.mount() jest odpowiedni dla programistów aplikacji integrujących widżety Mithril.js z istniejącymi bazami kodu, gdzie routing jest obsługiwany przez inną bibliotekę lub framework, ale chcą korzystać z automatycznego odświeżania Mithril.js.

m.render() jest odpowiedni dla autorów bibliotek, którzy chcą ręcznie kontrolować proces renderowania (np. podczas integracji z routerem innej firmy lub korzystania z bibliotek warstwy danych innej firmy, takich jak Redux).