اول با این شروع میکنیم که اصلا Dom چیه و چیکار میکنه و بعدش بهتر میتونیم مفهوم Virtual Dom رو متوجه بشیم.
وقتی یک صفحه html توی مرورگر بارگذاری میشه مرورگر میاد یک مدل شی گرا یا همون Dom ازش درست میکنه که ساختارش شبیه درخته و اشیاء موجود توصفحه میشن گره های این درخت .
در واقع Dom میاد کل UI صفحه رو شبیه یک درخت واسه خودش در نظر میگیره، حالا فایده اش چیه؟
اگر با زبان جاوا اسکریپت اشنایی داشته باشید میدونید که مثلا واسه تغییر استایل یک تگ یا المنت ما میام همین Dom یا Document Object Model رو تغییر میدیم و در واقع اپدیتش میکنیم، مثال زیر رو در نظر بگیرید که ما رنگ المنت h1 رو با گرفتنش از Dom تغییر میدیم:
<html> <body> <h1 id='demo'>The Document Object</h1> const myElement = document.getElementById('demo'); myElement.style.color = 'red' </body> </html>
هردفعه که تغییری در در المنت های Dom اتفاق میفته، Dom از اول رندر و اجرا میشه و در کتابخونه ای مثل ریکت که تغییرات در UI زیاد انجام میشه باید با هر تغییر درخت Dom دوباره رندر یا اجرا شه که این باعث پایین اومدن سرعت اجرا میشه حالا راه حل چیه؟؟
راه حل استفاده از Virtual Dom هست که الان در مورد اون هم توضیح خواهیم داد.
خلاصش اینه که هردفعه که تغییری تو المنت ها ایجاد میشه به جای Dom اون تغییرات روی Virtual Dom اجرا میشه خب الان سوال پیش میاد که دیگه چه کاریه از همون Dom استفاده میکردیم دیگه :))
اما نکته اینجاست تو عملکرد Virtual Dom اینطوریه که هردفعه که المنت جدید به UI اضافه میشه یک Virtual Dom به شکل درخت واسش ایجاد میشه( یادتون باشه که هر المنت یک گره ی درخت بود).
با هر تغییری در المنت ها یک Virtual Dom جدید براساس اون تغییرات ایجاد میشه و با Virtual Dom قبلی مقایسه میشه و Virtual Dom میاد این تغییرات بهینه رو روی Dom اعمال میکنه در واقع فقط اون المنت های خاص در Dom اصلی بروز میشه نه همش، اینطوری دفعات تغییر و در نهایت re-render یا دوباره اجرا شدن Dom کاهش پیدا میکنه و سرعت اجرا هم میره بالا.
