Virtual DOM (VDOM) არის მსუბუქი JavaScript ობიექტის ხე, რომელიც აღწერს როგორი უნდა იყოს UI. ეს არის უბრალო მეხსიერებაში არსებული წარმოდგენა — არა ნამდვილი ბრაუზერის DOM. React იყენებს მას, რადგან ნამდვილი DOM-ის პირდაპირი მანიპულირება ნელია, და მისი ხელით გაკეთება ყველა state ცვლილებაზე შეცდომის დაშვების რისკი აქვს.
როდესაც state იცვლება, React დაუყოვნებლივ გვერდს არ ეხება. ამის ნაცვლად:
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>;
}
ასე რომ, თქვენ წერთ კოდს დეკლარატიულად ("UI ასე გამოიყურება ამ state-ისთვის") და React გამორიცხავს imperativeული DOM ოპერაციებს თქვენი მიერ.
document.querySelector + mutate.