Wirtualny DOM: Co to jest i jak działa?

Czy zastanawiałeś się, jak to jest możliwe, że strony www zbudowane w ReactJS działają tak szybko?🤔 Nawet kiedy dokonujesz na nich wielu zmian, wciąż wszystko działa jak powinno. Sekretem jest coś, co nazywamy „Wirtualnym DOM” (Virtual Dom).

Wyobraź sobie, że masz model miasta z klocków LEGO. Za każdym razem, gdy chcesz dokonać jakiejś zmiany, zamiast przekształcać całe miasto, tworzysz po prostu małą kopię części, którą chcesz zmienić. Następnie dokonujesz zmian na tej kopii, a gdy wszystko jest gotowe, wymieniasz starą część miasta na nową.

Wirtualny DOM działa podobnie! Zamiast dokonywać bezpośrednich zmian na stronie (co może być wolne), React tworzy „wirtualną” kopię tej części strony, która ma zostać zmieniona. Następnie szybko dokonuje zmian na tej kopii, a gdy wszystko jest gotowe, „podmienia” starą część prawdziwej strony na nową.

Dzięki temu, zamiast przekształcać całą stronę za każdym razem, kiedy chcemy coś zmienić, dokonujemy tylko niezbędnych zmian. To jak szybka wymiana klocków LEGO w modelu miasta!