سلام دوستان 👋 توی این پست از مجموعه پستهای ریاکت ۱۰۱ میخوایم بررسی کنیم که Virtual DOM چیه، برای چی معرفی شده و توی ریاکت چطوری کار میکنه.
Virtual DOM چیه؟ 🤔
Virtual DOM که به اختصار به اون vDOM هم گفته میشه، یک نمونهٔ بهینهسازی شده از دام واقعی (Real DOM) هست که توی حافظه نگه داشته میشه و هدف از معرفی اون افزایش سرعت و عملکرد برنامههای فرانتاندی هست. vDOM معمولاً توسط کتابخونههایی استفاده میشه که با UI سر و کار دارن. مثل ریاکت و ویو.
مشکل دام اصلی چیه؟
توی دنیای مدرن وب، توی یک صفحه ممکنه صدها تغییر و تعامل رخ بده. بنابراین Interactivity و Responsiveness (قابلیت تعامل و واکنشپذیری) اهمیت بالایی داره. اما دام واقعی و نحوهٔ کارایی اون هنوز پاسخگوی چنین نیازی نیست.
هر تغییری که توی DOM اصلی رخ میده، علاوهبر اینکه تمام اون مجدد رندر میشه، خیلی از رویدادهای دیگه رو به همراه داره. از جمله بازطراحی مجدد صفحه (Layout Repaint) توسط مرورگر برای همگام شدن با آخرین تغییرات دام. در شرایطی که بعد از هر تغییر توی دام، مرورگر بهینهسازیهایی رو انجام میده، تغییرات سریعِ کوچیک و بزرگ میتونه مرورگر رو کاملاً کند و غیر بهینه کنه. پس میبایست روشی رو اختراع کرد که بشه تغییرات توی صفحه خیلی سریع و با کمترین هزینه رخ بدن؛ طوری که برنامه بهینگی خودش رو حفظ کنه. برای همین Virtual DOM معرفی شد.
vDOM توی ریاکت چطوری کار میکنه؟
vDOM توی یک برنامهٔ ریاکتی ۴ مرحلهٔ مهم رو طی میکنه:
مرحله اول: ساختن vDOM
وقتی یک برنامهٔ ریاکتی برای اولین بار رندر میشه، یک vDOM هم از المنتهایی که باید رندر بشه ساخته میشه. این DOM یک ساختار درختی (Tree) از دام واقعی و المنتهای اون هست که در حال حاضر رندر شده.
مرحله دوم: بروزرسانی vDOM
توی ریاکت همونطور که میدونیم برنامه زمانی Re-render میشه که موارد ریاکتیو مثلاً یک State یا Prop تغییر کنن. وقتی چنین تغییری رخ میده، ریاکت قبل از اینکه تغییرات رو توی دام اصلی اعمال کنه، ابتدا vDOM رو با این تغییرات بروز میکنه.
مرحله سوم: مقایسه vDOM جدید با نسخه قبلی
توی این مرحله ریاکت طی یک الگوریتم پیچیده که به اون Reconciliation Algorithm گفته میشه، مقایسهای بین vDOM جدید با vDOM قبلی انجام میده تا دقیق بتونه تغییرات رو شناسایی کنه.