Virtual DOM & Rendering
Virtual DOM, EK, LIGHTWEIGHT, JavaScript, REPRESENTATION hai, ACTUAL, DOM ka — JAB, EK, COMPONENT ka, STATE/PROPS, CHANGE HOTA hai, React, EK, NAYA, VIRTUAL DOM TREE, BANATA hai, aur, ISE, PURANE, VIRTUAL DOM SE, "DIFF" (COMPARE) karta hai (ISE, "RECONCILIATION" KEHTE hain).
Sirf, WOH, PARTS, JO, ACTUALLY, CHANGE, HUE, HAIN, WOHI, REAL DOM mein, UPDATE, HOTE, HAIN — DIRECT, DOM MANIPULATION (jaise, document.getElementById), SLOW hai, kyunki, BROWSER, ko, LAYOUT/REPAINT, BAAR-BAAR, KARNA, PADТA, HAI. React ka, DIFFING, ALGORITHM, ISE, MINIMIZE karta hai.
// State change hone par:
function Counter() {
const [count, setCount] = React.useState(0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}
// 1. setCount() call hota hai
// 2. React, NAYA virtual DOM tree banata hai
// 3. Purane virtual DOM se, DIFF (reconciliation) karta hai
// 4. SIRF, changed text node ("Count: 5"), REAL DOM mein, update hota hai- Virtual DOM = actual DOM ka, lightweight, JavaScript representation
- Reconciliation = purane, aur, naye, virtual DOM trees ko, DIFF karna
- Sirf, ACTUALLY changed parts, real DOM mein, update hote hain — PERFORMANT
Reconciliation, ALGORITHM, LISTS, KE, LIYE, key PROP, PAR, HEAVILY, DEPEND, KARTA, hai — CORRECT, KEYS, KE, BINA, React, GALAT, ASSUMPTIONS, BANA, SAKTA, hai, ki, KAUN, SA, ITEM, KAUN, SA, hai, JISSE, BUGS, YA, PERFORMANCE, ISSUES, AA, SAKTE, HAIN.
React, 18, SE, PEHLE, sirf, EVENT, HANDLERS, KE, ANDAR, KE, setState, CALLS, BATCH, HOTE, THE. React 18, MEIN, PROMISES, setTimeout, aur, NATIVE, EVENT, HANDLERS, KE, ANDAR, BHI, AUTOMATICALLY, BATCHING, HOTI, hai — FEWER, RE-RENDERS, BETTER, PERFORMANCE.
- React 17 aur, PEHLE = sirf, EVENT, handlers, ke, andar, batching
- React 18+ = HAR, JAGAH, (promises, setTimeout) automatic, batching