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>;
}
તેથી તમે વર્ણનાત્મક રીતે કોડ લખો છો ("આ state માટે UI આવી રીતે દેખાય છે") અને React તમારા માટે અનिवાર્ય DOM ક્રિયાઓ શોધી કાઢે છે.
document.querySelector + મ્યુટેટ કરતાં સમજવામાં સરળ છે.