Virtual DOM (VDOM), kullanıcı arayüzünün nasıl görünmesi gerektiğini tanımlayan hafif bir JavaScript nesneleri ağacıdır. Saf bir bellek içi temsil olup, gerçek tarayıcı DOM'u değildir. React bunu kullanır çünkü gerçek DOM'u doğrudan manipüle etmek yavaştır ve her durum değişikliğinde bunu el ile yapmak hata yapılmasına açıktır.
Durum değiştiğinde React sayfaya hemen dokunmaz. Bunun yerine:
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>;
}
Böylece kodu deklaratif olarak yazarsınız ("kullanıcı arayüzü bu durum için şu şekilde görünür") ve React size gereken zorunlu DOM işlemlerini bulur.
document.querySelector + mutate etmekten daha akılda kalıcıdır.