اگه شماهم یک React Developer تازه وارد هستید یا چندسال سابقه کار دارید ، ممکنه یک دید کلی از دام مجازی ری اکت ( React Virtual Dom ) داشته باشید ولی این کافی نیست !
حقیقتا به عنوان یک Front End Enginner باید درک عمیقی از React داشته باشید . از اونجاییکه دام مجازی یکی از مهمترین مباحث ری اکت هست ، لازم هست یکبار برای همیشه بدونیم که دام مجازی ری اکت چیه و چطور کار میکنه ؟
پس با فِرانت اِندی همراه باشید تا بصورت تخصصی بررسیش کنیم ?
قبل از بررسی تخصصی Virtual DOM ، بهتره بریم سراغ خود DOM و ببینیم DOM چیه .
دام مخفف عبارت Document Object Model هست . در واقع DOM نشان دهنده UI ( ظاهر ) وبسایت شماست و هربار که تغییری در سایت اعمال میشه ، DOM یکبار بروزرسانی میشه.
در حقیقت DOM یک ساختار درختی از تمامی Element ها و تگ های موجود در صفحه وب شماست.
به تصویر بالا دقت کنید .
کد سمت چپ ، کد Html صفحه شماست که به DOM سمت راست تبدیل شده . در واقع DOM یک ساختار درختی شکل از اجرای صفحه شما ( تگ ها ) میسازه
بطور خلاصه و ساده Virtual DOM یک نسخه مجازی و کوچک شده از DOM اصلی وبسایت شماست که React از اون برای اعمال سریع تغییرات روی سایت استفاده میکنه.
انجام اینکار باعث میشه که فقط همان اِلِمانی که تغییر داشته ، در UI بروزرسانی بشه .
دام مجازی همانطور که از اسمش هم پیداست ، یک نسخه مجازی از DOM واقعیه .
هربار که چیزی ( اِلِمانی ) در وبسایت ما تغییر میکنه ، بجای اینکه DOM اصلی بروزرسانی بشه ، دام مجازی بروزرسانی میشه .
سالها پیش ( که هنوز کتابخانه های جاوااسکریپتی مثل ری اکت و انگولار وجود نداشتن ) چیزی به اسم Virtual DOM هم وجود نداشت.
اگه هنوز هم سری به سایتهای قدیمی بندازید میبینید هربار که سایت تغییری میکنه ( مثلا از صفحه ای به صفحه دیگر میرید ) کل صفحه Refresh میشه .
یا مثلا زمانیکه محصولی رو به سبد خرید خودتون اضافه میکنید ، بلافاصله کل صفحه Refresh میشه !
این اتفاق به این دلیل میوفته که مستقیما DOM داره بروزرسانی میشه . اما توی React به لطف وجود داشتن دام مجازی ، دیگه Refresh شدنی صورت نمیگیره . چون دام مجازی داره تغییر میکنه.
در React ، به ازای هر Element در DOM واقعی ، یک Element در دام مجازی وجود دارد . ( یعنی در ازای هر div در DOM ، یک div با همان خصوصیات و ویژگی ها در دام مجازی وجود دارد )
لطفا برای مطالعه ادامه این مقاله تخصصی روی لینک زیر کلیک کنید :
