Virtual DOM (VDOM) to lekka drzewiasta struktura obiektów JavaScript, która opisuje, jak powinna wyglądać interfejs użytkownika. Jest to zwykła reprezentacja w pamięci — nie jest to rzeczywisty DOM przeglądarki. React go wykorzystuje, ponieważ bezpośrednia manipulacja rzeczywistym DOM-em jest wolna, a robienie tego ręcznie przy każdej zmianie stanu jest podatne na błędy.
Kiedy stan się zmienia, React nie dotyka od razu strony. Zamiast tego:
function Counter() {
const [n, setN] = useState(0);
// Each click produces a NEW virtual tree describing <button>{n}</button>.
// React compares old vs new and updates ONLY the text node that changed,
// not the whole button or the page.
return <button onClick={() => setN(n + 1)}>{n}</button>;
}
Pisz kod deklaratywnie ("interfejs użytkownika wygląda tak dla tego stanu"), a React sam oblicza dla Ciebie imperatywne operacje na DOM-ie.
document.querySelector + mutacja.