Virtual DOM (VDOM) هي شجرة كائنات JavaScript خفيفة الوزن تصف كيف يجب أن يبدو واجهة المستخدم. إنها تمثيل عادي في الذاكرة — وليس DOM المتصفح الفعلي. تستخدم React هذه الطريقة لأن التعديل المباشر على DOM الفعلي بطيء جداً، وفعله يدويًا في كل تغيير حالة يكون عرضة للأخطاء.
عندما تتغير الحالة، لا تقوم 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>;
}
لذا تكتب الكود بطريقة تصريحية ("واجهة المستخدم تبدو هكذا لهذه الحالة") وتكتشف React العمليات الضرورية على DOM بالنسبة لك.
document.querySelector اليدوي + التعديل.