Wirtualny DOM i React

Zacznijmy od definicji w serwisie Reactjs.org

Wirtualny DOM (VDOM) to koncepcja programowania, w której idealna lub „wirtualna” reprezentacja interfejsu użytkownika jest przechowywana w pamięci i synchronizowana z „prawdziwym” DOM przez bibliotekę taką jak ReactDOM. Ten proces nazywa się pojednaniem.

To była piekielna definicja, spróbujmy ją zrozumieć.

Wirtualny DOM to koncepcja implementowana przez biblioteki w oparciu o API przeglądarki. Za każdym razem, gdy dokonywana jest zmiana w przeglądarce, JS przemierza cały DOM zamiast renderować tylko tę część, która wymaga zmian. Co jest czasochłonne i drogie.

Mówiąc laikiem, załóżmy, że silnik twojego samochodu wymaga naprawy, więc naprawisz silnik, a nie naprawisz cały samochód. To samo dotyczy wirtualnego DOM, zamiast renderowania całego DOM, renderowany jest tylko ten element, w którym dokonano zmiany.

React używa algorytmu Diff do porównania zmian między nowym drzewem a najnowszym drzewem (drzewo tutaj jest niczym innym, jak tylko odniesieniem do dokonanych zmian, czyli nowego VDOM i najnowszego VDOM). Ten proces porównania nazywa się Pojednaniem.

React analizuje drzewo za pomocą wyszukiwania wszerz (BFS).

Zawsze pamiętaj, że wirtualny DOM nie istnieje fizycznie, jest reprezentacją w pamięci lub planem Real DOM.

Weźmy inny przykład: budujesz formularz, który składa się z dwóch pól wejściowych. Teraz musisz dodać kolejne pole wejściowe, po dodaniu trzeciego pola wejściowego tworzony jest VDOM z Twoimi zmianami, a rzeczywisty DOM pozostaje nienaruszony. Teraz ma miejsce porównanie VDOM z rzeczywistym DOM, a zmiany są wprowadzane tylko w div tam, gdzie jest to wymagane.

Dlaczego wirtualny DOM? Proste, to sprawia, że ​​szybko reagujesz. Robi to poprzez wirtualne porównywanie DOM. Porównując dwa wirtualne drzewa stare i nowe, dokonaj tylko niezbędnych zmian w rzeczywistym DOM.

Nie daj się zwieść, że VDOM jest rozwijany przez React js, VDOM to koncepcja używana przez React js. Wirtualny DOM jest zasadniczo zrzutem ekranu DOM w danym momencie. Za każdym razem, gdy wprowadzana jest zmiana, komponent jest ponownie renderowany, tworząc nowy VDOM.

Wirtualny DOM zyskał popularność, ponieważ przyspiesza działanie aplikacji i eliminuje niepotrzebne renderowanie całej strony. Co oszczędza czas i pieniądze.

Mam nadzieję, że artykuł Ci się spodobał i okazał się pomocny. Jeśli coś przegapiłem, daj mi znać w komentarzu.