Virtual DOM (VDOM) అనేది UI ఎలా ఉండాలో వర్ణించే ఒక సుదీర్ఘ JavaScript object tree. ఇది సాదా in-memory representation — నిజమైన browser DOM కాదు. React దానిని ఉపయోగిస్తుంది ఎందుకంటే నిజమైన DOM ను నేరుగా మార్చడం నెమ్మదిగా ఉంటుంది, మరియు ప్రతిసారి state మారినప్పుడు దానిని manually చేయడం లోపాలకు గురవుతుంది.
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>;
}
కాబట్టి మీరు declaratively కోడ్ రాయండి ("UI ఈ state కోసం ఇలా ఉంటుంది") మరియు React మీ కోసం imperative DOM operations ని రూపొందిస్తుంది.
document.querySelector + mutate కన్నా సులభంగా చేత్తయ్యుకోవడానికి.