دام مجازی نسخهای از دام اصلی است که توسط کتابخانه ریاکت ساخته و استفاده میشود تا تغییرات لازم برای آپدیت و رندر مجدد صفحه به حداقل برسد. نحوه انجام این کار به این صورت است که ریاکت بهصورت هوشمند تغییراتی را که شما در کدها ایجاد میکنید، بررسی میکند و فقط بخشهایی را که نیاز به حذف، اضافه یا ویرایش دارند مشخص میکند. سپس تنها همان تغییرات را روی دام اصلی اعمال میکند و باقی قسمتها بدون تغییر میمانند. این کار باعث میشود از عملیات اضافی جلوگیری شود و در نتیجه سرعت و بهرهوری کار شما بهشکل چشمگیری افزایش پیدا کند.
در این قسمت از دوره اموزش کتابخانه React میبینید که تغییرات شما به چه صورت توسط ریاکت تشخیص داده شده و مدیریت میشوند. ابتدا تگهایی که تغییرشان دادهاید شناسایی و در دام مجازی ثبت میشوند؛ سپس ریاکت یک مقایسه بین دام مجازی و دام اصلی انجام میدهد و فقط همان قسمتهایی را که تغییر یافتهاند در دام اصلی آپدیت میکند.
تفاوت DOM و Virtual DOM در ریاکت
در این بخش قصد داریم تفاوت بین DOM و Virtual DOM را بررسی کنیم و با مفهوم هر یک و نحوه عملکرد آنها آشنا شویم.
DOM یا Document Object Model در واقع مدلی ساختاریافته از عناصر و آبجکتهای موجود در یک سند HTML است؛ سندی که همان صفحه وب ما را تشکیل میدهد. این مدل شامل تمام المانهایی است که در صفحه وب استفاده شدهاند و به صورت یک ساختار درختی نمایش داده میشوند. به این ساختار، DOM گفته میشود. ریاکت مستقیماً DOM اصلی را تغییر نمیدهد، بلکه ابتدا یک نسخه مجازی از DOM ایجاد میکند که به آن Virtual DOM گفته میشود. تمام تغییرات ابتدا روی این نسخه مجازی اعمال میشوند.
پس از اعمال تغییرات روی Virtual DOM، ریاکت تغییرات جدید را با نسخه قبلی مقایسه میکند و تنها بخشهایی که واقعاً نیاز به تغییر دارند را روی DOM اصلی اعمال میکند. این فرآیند باعث افزایش چشمگیر سرعت و بهینهسازی عملکرد برنامههای نوشتهشده با ریاکت میشود.
برای مشاهده DOM، کافی است وارد یک وبسایت (برای مثال سایت سکان آکادمی) شده، روی صفحه راستکلیک کرده و گزینه Inspect را انتخاب کنیم. همانطور که مشاهده میکنید، ساختار DOM شامل یک تگ اصلی <html> است که خود دارای دو زیرمجموعه اصلی یعنی <head> و <body> میباشد.
هر یک از این تگها نیز شامل زیرمجموعههای متعددی هستند. برای مثال، تگ <body> معمولاً شامل چندین <div> و المانهای دیگر است و هر کدام از این المانها نیز میتوانند زیرمجموعههای خاص خود را داشته باشند. در نهایت، مجموعه این روابط، یک ساختار درختی را تشکیل میدهد که همان DOM صفحه وب است.
نحوه اعمال تغییرات در DOM توسط ریاکت
برای درک بهتر این موضوع، یک مثال ساده را در نظر بگیرید. فرض کنید قصد داریم:
- یک تگ
<h1>را از سند حذف کنیم - و یک تگ
<p>جدید به سند اضافه کنیم
در ریاکت، این تغییرات ابتدا روی Virtual DOM انجام میشوند. پس از انجام تغییرات و در زمان Re-render شدن کامپوننت (که در بخشهای بعدی به طور کامل بررسی خواهد شد)، ریاکت فقط همان تغییرات نهایی را روی DOM اصلی اعمال میکند.
در این مثال:
- تگ
<h1>که حذف شده است (با رنگ قرمز نمایش داده میشود) - و تگ
<p>که اضافه شده است (با رنگ سبز مشخص میشود)
سایر بخشهای DOM بدون هیچ تغییری باقی میمانند. این دقیقاً همان مکانیزمی است که باعث میشود ریاکت بتواند تغییرات را به شکلی هوشمندانه و بهینه روی صفحه اعمال کند.
جمعبندی
- DOM یک ساختار درختی است که تمام عناصر صفحه وب را نمایش میدهد.
- Virtual DOM یک نسخه مجازی از DOM است که تغییرات ابتدا روی آن اعمال میشود.
- ریاکت با مقایسه Virtual DOM با نسخه قبلی، فقط بخشهایی که نیاز به تغییر دارند را روی DOM واقعی اعمال میکند.
- این مکانیزم باعث افزایش سرعت، کاهش بار پردازشی و بهبود تجربه کاربری میشود.
با درک این فرآیند، شما میتوانید بهتر بفهمید چرا ریاکت برای توسعه رابطهای کاربری بزرگ و پویا اینقدر بهینه و محبوب است.