More

    Wykorzystanie Virtual DOM na przykładzie Reacta

    Virtual DOM to bardzo popularne rozwiązanie znane z Reacta. Co to dokładnie jest? W jaki sposób działa w Reactcie? O tym opowie Kamil w swoim kolejnym wpisie traktującym o Web Components.

    Po co nam Virtual DOM?

    W ciągu ostatnich lat obszar stosowania JavaScriptu na stronach internetowych rósł – od używania go do podstawowych operacji jak np. proste przełączanie widoczności elementów aż po tworzenie całej zawartości strony w JS. Nowoczesne aplikacje napisane np. w Reactcie posiadają już całość kodu HTML zdefiniowanego przy użyciu JS-a. A dokładnie JSX, który następnie jest renderowany na stronie w postaci HTML. 

    Nawiązując do wcześniejszych wpisów, w których opowiadałem o Web Components, ważne jest zwrócenie uwagi na to, że jeśli w naszej aplikacji zachodzą zmiany, to musimy wprowadzić je również w drzewie DOM naszej strony. Jest to dość czasochłonne, ponieważ przeglądarka musi od nowa przeliczyć i przerysować elementy. Oczywiście, w prostej aplikacji nie zauważymy problemu, natomiast im więcej elementów na stronie mamy, tym problem staje się bardziej widoczny.

    Rozwiązaniem jest Virtual DOM, które nie jest konkretną technologią ani biblioteką. Jest konceptem opisującym w jaki sposób możemy zoptymalizować działanie naszej strony.

    Kiedy słyszysz o Virtual DOM, jednym z Twoich pierwszych skojarzeń jest pewnie React.js, który faktycznie bardzo upowszechnił ten termin, tworząc jego własną implementację. To pozwoliło na bardzo szybkie działanie aplikacji stworzonych właśnie z użyciem Reacta.

    Zasada działania na przykładzie React

    Sam pomysł działania tego mechanizmu jest bardzo prosty. Cała reprezentacja naszego drzewa DOM posiada własną kopię w obiekcie JavaScript. W momencie kiedy w naszej aplikacji zachodzą zmiany, np. wywołane przy pomocy funkcji setState, React aktualizuje Virtual DOM zapisane w obiekcie JS. 

    Operacje wykonywane na obiekcie JS są bardzo szybkie i jest to miejsce, w którym zyskujemy sporo na wydajności.

    A jak to działa? Po wykonaniu wszystkich aktualizacji, React porównuje stare drzewo Virtual DOM z nowym, wydzielając różnicę pomiędzy nimi. Następnie silnik Reacta na podstawie tych różnic, szuka najbardziej optymalnej drogi do aktualizacji prawdziwego drzewa DOM w przeglądarce. Dzięki temu zamiast kilku odwołań i zmian do prawdziwego drzewa, mamy tylko jedno.

    Warto zauważyć, że drzewo DOM przeglądarki jak i Virtual DOM są reprezentowane przez drzewo. To pozwala zastosować algorytmy operacji na drzewach, pozwalających na optymalizację procesów wyszukiwania i modyfikacji.

    Gdzie jeszcze używamy Virtual DOM?

    Virtual DOM jest używany także w Vue.js, a na pewno przykładów frameworków JavaScriptowych korzystających z tego rozwiązania znalazłoby się więcej. Zaletą Virtual DOM jest to, że możemy użyć go w prostej aplikacji stworzonej przy pomocy czystego JS. Możemy pokusić się o samodzielną implementację tego konceptu lub znaleźć gotowe rozwiązanie.

    Przy pomocy omówionej wyżej techniki możemy zoptymalizować wprowadzanie zmian w HTML-u. Mimo, że sami raczej nie będziemy musieli przejmować się implementacją Virtual DOM, a po prostu skorzystamy np. z Reacta, warto wiedzieć jak to działa pod maską.

    Kamil Wilk
    Programowanie to jego pasja. Zaczynał jako samouk, poświęcił dużo czasu na własny rozwój. Obecnie pracuje w dużej korporacji jako Front-end Developer, ale back-end w JavaScript nie jest mu obcy. Nie boi się trudnych wyzwań w swojej karierze. Na bieżąco stara się śledzić nowości w branży. Lubi wyszukiwać ciekawostki ze świata dev.

    Latest articles

    Automatyzacja z Pythonem – pobieranie kolekcji filmów z YouTube

    Automatyzacja czynności, które są czasochłonne, to według mnie największa zaleta nauki programowania. Często zadania wymagające od nas klikania, czekania i przepisywania captchy...

    Programowanie funkcyjne w JS

    Jeśli bierzesz udział w rozmowach rekrutacyjnych na stanowisko regular lub senior developera, to pewnie niejednokrotnie miałeś lub miałaś do czynienia z takimi...

    Własny plugin do Figmy w React.js

    Jeśli udało Ci się kiedykolwiek pracować z Figmą, istnieje spora szansa, że narzędzie przypadło Ci do gustu. Tak przynajmniej było w moim...

    Wykorzystanie Virtual DOM na przykładzie Reacta

    Virtual DOM to bardzo popularne rozwiązanie znane z Reacta. Co to dokładnie jest? W jaki sposób działa w Reactcie? O tym opowie...

    Leave a reply

    Please enter your comment!
    Please enter your name here

    Related articles

    X