virtual-dom

Virtual DOM – popularne rozwiązanie znane z Reacta

Z artykułu dowiesz się:

  1. Dlaczego korzystanie z DOM jest mało wydajne
  2. Czym jest Virtual DOM
  3. Jak działa Virtual DOM
  4. Jak React optymalizuje aplikacje z pomocą VDOM

Przecież mamy już DOM

Document Object Model to abstrakcyjne pojęcie odnoszące się do struktury tekstu, gdzie znaczniki HTML stają się dostępnymi do manipulacji elementami poprzez interfejs (API) DOM.

Każda zmiana za pomocą tego interfejsu powoduje generowanie na nowo danego elementu oraz jego dzieci, zgodnie z poniższym schematem.

jak-renderuje-przegladarka

Za każdą zmianą idzie sporo obliczeń dotyczących stylów CSS’ów, zmiany layoutu, oraz nowego renderowania. Dla małych stron obsługa paru elementów UI nie będzie problemem, lecz przy większych stronach gdzie potrzeba obsłużyć dużo więcej odwołań do DOM staje się bardzo nieefektywne i powoduje problemy wydajnościowe.

Czym jest Virtual DOM?

VDOM jest lżejszym odpowiednikiem oryginalnego DOM, którego aktualizowanie jest znacznie bardziej zoptymalizowane, gdyż nie powoduje ono zmian na ekranie. Nie mamy do niego dostępu z poziomu Dev toolsów zaimplementowanych w przeglądarki, ale są już rozszerzania, które umożliwiają nam pogląd Virtual DOM np. Dla Reacta będzie to React Developer Tools.

react-developer-tools-image

W jaki sposób React korzysta z VDOM?

Biblioteka React używa tzw. komponentów które posiadają stany. Zmiana stanu metodą setState() np. z true na false powoduje konkretne reakcje aplikacji na posunięcia użytkownika , czyli najczęściej zmiany w DOM. Gdy stan ulegnie zmianie React aktualizuje Virtual DOM, jest to duzo mnie kosztowne od zmian prawdziwego DOM, ponieważ nie powoduje zmian w wyświetlaniu. Gdy Virtual DOM zostanie już zaktualizowany React porównuje go z wersją sprzed zmiany stanu, wykorzystuje się do tego dobrze zoptymalizowane algorytmy aby wszystko działało szybko. Proces ten nazywany jest angielskim słowem “diff”.

schemat-dzialania-virtual-dom

źródło: https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html

Następuje renderowanie zmienionych elementów oraz wszystkich jego dzieci. Virtual DOM znajduje jak najlepszy sposób na wprowadzenie wszystkich zmian na stronę, aby jak najbardziej zmniejszyć liczbę odwołań poprzez interfejs DOM. To sprawia że biblioteka React jest bardzo wydajna i zoptymalizowana. Na szczęście developerzy nie muszą się o nic martwić, bo framework robi to wszystko sam “pod maską”.

Co reprezentuje elementy DOM w React?

Skoro możemy edytować elementy DOM za pomocą VDOM każdy znacznik HTML potrzebuje swojego reprezentanta w VDOM. Stworzenie takiego odpowiednika React umożliwia dzięki metodzie ReactElement(), jednak zaleca się korzystanie z JSX czyli specjalnej składni przypominającej HTML, jest ona potem kompilowana do zwykłej składni Reacta. Po stworzeniu elementu musimy go jeszcze jakoś przekazać do VDOM, pozwala nam to metoda render() wywołana w komponencie stanowym, gdzie umieszczane są elementy React przekazywane do VDOM.

Aplikacje React posiadają zazwyczaj jeden główny komponent, który po otwarciu strony zaczyna renderować całą resztę za pomocą metody w obiekcie.

ReactDOM.render(główny komponent, odwołanie DOM do miejsca, gdzie ma być umieszczona aplikacja)

Korzystanie takiego rozwiązania umożliwia umieszczanie atrybutów w VDOM, które nie będą widoczne w DOM. Przykładem takich atrybutów w React będą eventy np. OnChange, OnClick. Innym przykładem jest atrybut key stosowany w listach, dzięki niemu React bardzo skutecznie porównuje listy na podstawie unikalnych wartości tego atrybutu w każdym elemencie li.

Podsumowując Virtual DOM to przyszłość co pokazują wyniki wydajnościowe i optymalizacja tego rozwiązania w najpopularniejszych frameworkach.