Virtual DOM در ری‌اکت چیست؟ آموزش مفهوم و نحوه کار با DOM مجازی

Virtual DOM یا DOM مجازی یکی از مفاهیم کلیدی و مهم‌ترین ویژگی‌های کتابخانه ری‌اکت (React) است که باعث افزایش چشمگیر سرعت و کارایی (Performance) برنامه‌های وب می‌شود. در واقع Virtual DOM یک نمایش سبک‌وزن و مجازی از DOM واقعی (Real DOM) مرورگر است که در حافظه (Memory) نگهداری می‌شود.

---

DOM واقعی چیست و چالش آن چیست؟

DOM یا Document Object Model یک رابط برنامه‌نویسی است که مرورگر از آن برای نمایش ساختار صفحه وب استفاده می‌کند. هر بار که تغییری در داده‌های یک صفحه رخ می‌دهد، مرورگر باید کل درخت DOM را دوباره بازسازی کند (Reflow و Repaint). این عملیات در برنامه‌های پویا با تغییرات زیاد، بسیار سنگین و کند است و باعث کاهش عملکرد برنامه می‌شود.

---

Virtual DOM چیست و چگونه کار می‌کند؟

ری‌اکت برای حل مشکل کندی DOM واقعی، از Virtual DOM استفاده می‌کند. این یک کپی سبک‌وزن از DOM واقعی است که در حافظه جاوااسکریپت ذخیره می‌شود و هیچ ارتباط مستقیمی با مرورگر ندارد.

مراحل کار Virtual DOM در ری‌اکت:

۱. ایجاد Virtual DOM اولیه هنگامی که یک کامپوننت ری‌اکت برای اولین بار رندر می‌شود، ری‌اکت یک درخت Virtual DOM متناسب با ساختار آن کامپوننت ایجاد کرده و در حافظه نگه می‌دارد.

۲. تغییر وضعیت (State) یا Props زمانی که داده‌های یک کامپوننت تغییر می‌کند (مثلاً با کلیک کاربر یا دریافت داده از سرور)، ری‌اکت یک Virtual DOM جدید بر اساس وضعیت جدید می‌سازد.

۳. مقایسه با Diffing Algorithm ری‌اکت از یک الگوریتم کارآمد به نام Diffing Algorithm استفاده می‌کند تا Virtual DOM جدید را با نسخه قبلی خود مقایسه کند. این الگوریتم دقیقاً تشخیص می‌دهد که چه تغییراتی در ساختار، ویژگی‌ها یا محتوای عناصر رخ داده است.

۴. به‌روزرسانی هوشمند (Reconciliation) در نهایت، ری‌اکت تنها تغییرات شناسایی شده را به DOM واقعی اعمال می‌کند. این بدان معناست که به جای رندر مجدد کل صفحه، فقط بخش‌هایی از صفحه که واقعاً تغییر کرده‌اند به‌روزرسانی می‌شوند.

---

مزایای استفاده از Virtual DOM

• افزایش سرعت: به‌روزرسانی هدفمند و جزئی، عملکرد برنامه را به شدت بهبود می‌بخشد.
• کاهش مصرف حافظه: Virtual DOM سبک‌تر از DOM واقعی است و عملیات روی آن سریع‌تر انجام می‌شود.
• تجربه کاربری بهتر (UX): برنامه‌های React به دلیل رندر سریع، واکنش‌گراتر و روان‌تر هستند.
• قابلیت Cross-Platform: Virtual DOM مستقل از مرورگر است و در React Native نیز برای برنامه‌های موبایل استفاده می‌شود.

---

مقایسه Virtual DOM با DOM واقعی

---

مثال بصری از عملکرد Virtual DOM

فرض کنید یک لیست از ۱۰۰۰ آیتم دارید و فقط یکی از آیتم‌ها تغییر می‌کند:

• DOM واقعی: کل ۱۰۰۰ آیتم دوباره رندر می‌شوند.
• Virtual DOM: فقط همان آیتم تغییر کرده به‌روزرسانی می‌شود.

---

خلاصه و جمع‌بندی

Virtual DOM قلب تپنده عملکرد بالای ری‌اکت است. این فناوری با استفاده از یک کپی مجازی از DOM و الگوریتم مقایسه هوشمند، باعث می‌شود که برنامه‌های React در عین پویایی و تغییرات مداوم، سریع، کارآمد و روان اجرا شوند. درک این مفهوم برای هر توسعه‌دهنده ری‌اکت ضروری است و به شما کمک می‌کند تا برنامه‌های بهینه‌تری بنویسید.