render(element, vnodes)
Opis
Renderuje szablon do drzewa DOM.
m.render(document.body, 'hello');
// <body>hello</body>Podpis
m.render(element, vnodes, redraw)
| Argument | Typ | Wymagany | Opis |
|---|---|---|---|
element | Element | Tak | Element DOM, który będzie węzłem nadrzędnym dla renderowanego poddrzewa. |
vnodes | Array<Vnode>|Vnode | Tak | Węzły VDOM (Vnody) do renderowania. |
redraw | () -> any | Nie | Funkcja zwrotna wywoływana przy każdym wywołaniu obsługi zdarzeń w renderowanym poddrzewie. |
| zwraca | Zwraca undefined. |
Jak to działa
Metoda m.render(element, vnodes) przyjmuje wirtualne drzewo DOM (zwykle generowane za pomocą funkcji m() hyperscript), generuje odpowiadające mu drzewo DOM i montuje je w elemencie element. Jeśli element zawiera już drzewo DOM zamontowane przez wcześniejsze wywołanie m.render(), vnodes jest porównywane z poprzednim drzewem vnodes, a istniejące drzewo DOM jest modyfikowane tylko tam, gdzie jest to konieczne, aby odzwierciedlić zmiany. Niezmienione węzły DOM pozostają nietknięte.
Opcjonalny argument redraw jest wywoływany za każdym razem, gdy wywoływany jest program obsługi zdarzeń w dowolnym miejscu renderowanego poddrzewa. Jest on używany przez m.mount i m.redraw do implementacji funkcjonalności autoredraw, ale jest również dostępny dla bardziej zaawansowanych przypadków użycia, takich jak integracja z frameworkami innych firm.
m.render działa synchronicznie.
Dlaczego Virtual DOM
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 odczytem i modyfikacją DOM.
Manipulacja DOM może być niezwykle kosztowna z kilku powodów. Naprzemienne odczyty i zapisy mogą negatywnie wpływać na wydajność, powodując wielokrotne przebudowy strony następujące szybko po sobie, podczas gdy porównywanie wirtualnych drzew DOM pozwala na łączenie zapisów w jedno przemalowanie. Ponadto wydajność różnych operacji DOM zależy od implementacji i może być trudna do opanowania i zoptymalizowania pod kątem 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 przemalowanie, itp.
Natomiast przetwarzanie struktur danych JavaScript ma znacznie bardziej przewidywalny i rozsądny profil wydajności, a ponadto drzewo vnode jest zaimplementowane tak, by umożliwiać nowoczesnym silnikom JavaScript stosowanie agresywnych optymalizacji, takich jak ukryte klasy, dla jeszcze lepszej wydajności.
Różnice w stosunku do innych metod API
Metoda m.render() jest wewnętrznie wywoływana przez m.mount(), m.route(), m.redraw() i m.request(). Nie jest wywoływana po aktualizacjach strumieniowych.
W przeciwieństwie do m.mount() i m.route(), drzewo vnode renderowane za pomocą m.render() nie odświeża się automatycznie w odpowiedzi na zdarzenia w widoku, wywołania m.redraw() lub wywołania m.request(). Jest to mechanizm niskiego poziomu przeznaczony dla twórców bibliotek, którzy chcą ręcznie kontrolować proces renderowania, zamiast polegać na wbudowanym systemie automatycznego odświeżania w Mithril.js.
Kolejną różnicą jest to, że metoda m.render oczekuje vnode (lub tablicy vnode) jako drugiego parametru, podczas gdy m.mount() i m.route() oczekują komponentów.
Użycie autonomiczne
var render = require("mithril/render")
Zakres modułu m.render jest zbliżony do bibliotek widoków, takich jak Knockout, React i Vue. Implementuje silnik różnicowania wirtualnego DOM z nowoczesnym algorytmem redukcji przestrzeni wyszukiwania oraz recyklingiem DOM, co zapewnia najlepszą wydajność w swojej klasie, zarówno pod względem początkowego ładowania strony, jak i ponownego renderowania. Nie ma zależności od innych części Mithril.js poza normalizacją udostępnianą za pośrednictwem require("mithril/render/vnode") i może być używany jako samodzielna biblioteka.
Pomimo stosunkowo niewielkich rozmiarów, moduł renderowania jest w pełni funkcjonalny i samowystarczalny. Obsługuje wszystko, czego można oczekiwać: SVG, elementy niestandardowe i wszystkie prawidłowe atrybuty i zdarzenia - bez dziwnych wyjątków czy problemów z wielkością liter. Oczywiście w pełni obsługuje również komponenty i metody cyklu życia.
Używając m.render jako samodzielnego modułu, warto również zaimportować funkcję hyperscript w celu tworzenia węzłów VDOM do renderowania.