درک React و Virtual DOM (توضیح آسان)

هر بار که در مورد React و مزایای اصلی آن صحبت می کنیم، با اصطلاح Virtual DOM مواجه می شویم، ویژگی بسیار جالبی که React را به گزینه ای عالی برای ساخت اپلیکیشن تبدیل می کند.

DOM چیست؟

قبل از اینکه بدانیم DOM مجازی چیست، اجازه دهید ابتدا نگاهی به DOM واقعی بیاندازیم.

DOM مخفف Document Object Model است. در اصل ساختاری است که تمام عناصر موجود در HTML یک صفحه را نشان می دهد.

هر عنصر در این ساختار درختی یک گره است. گره ها می توانند فرزند داشته باشند، به این معنی که هر عنصر می تواند زیردرخت خود را نیز داشته باشد.

مثال بالا یک گره div را نشان می دهد که گره ap را فرزند خود دارد. ساده ترین راه برای توضیح اینکه DOM چیست: یک ساختار درختی که نشان دهنده روابط بین عناصر HTML است.

در یک برنامه وب سنتی (به صفحات وب قدیمی‌تری فکر کنید که ممکن است استفاده کرده باشید)، به‌روزرسانی یک عنصر روی صفحه اغلب به معنای بارگیری مجدد کل صفحه است. این رویکرد پیش فرض می تواند دست و پا گیر شود، به خصوص در برنامه های بزرگ با به روز رسانی های مکرر.

Virtual DOM راه کارآمدتری برای مدیریت وضعیت و داده در یک برنامه بدون نیاز به بارگذاری مجدد کل صفحه برای اعمال تغییرات ارائه می دهد.

چگونه کار می کند؟

React یک نمایش در حافظه از DOM واقعی به نام Virtual DOM ایجاد می کند. این نمایش دائما توسط React 👀 مشاهده می شود.

هر زمان که کاربر با برنامه تعامل داشته باشد، React با استفاده از فرآیندی به نام “Diffing”، DOM مجازی به روز شده را با نسخه قبلی DOM واقعی مقایسه می کند.

اگر React تغییری را شناسایی کند، گره دقیقی را که در آن تغییر رخ داده است شناسایی می‌کند و تنها آن قسمت از DOM را به‌روزرسانی می‌کند. این کار از به‌روزرسانی کل صفحه جلوگیری می‌کند و منجر به تجربه کاربری بسیار روان‌تر می‌شود. خیلی باهوش!!!1

برخی از رقبای بالقوه

برای برنامه‌های بسیار پویا، مانند برنامه‌هایی که به‌روزرسانی‌های هم‌زمان دارند (مثلاً نمودارها یا بازی‌ها)، فرآیند Diffing ممکن است کند شود زیرا React باید هر تغییری را ارزیابی کند. این می تواند بر عملکرد تأثیر بگذارد.

علاوه بر این، اگر به درستی مدیریت نشود، می‌تواند یک چالش بزرگ باشد. برای مثال، زمانی که وضعیت یک لیست بزرگ تغییر می‌کند، React ممکن است نیاز به تطبیق بسیاری از به‌روزرسانی‌های DOM داشته باشد که منجر به عملکرد تاخیری می‌شود.

برای کاهش این موضوع، React از ویژگی های کلیدی در لیست ها استفاده می کند. این کلیدها به React کمک می‌کنند تا هر مورد را در لیست به‌طور منحصربه‌فرد شناسایی کند و به‌طور موثر تعیین کند که کدام موارد اضافه، حذف یا به‌روزرسانی شده‌اند.

این اصولی است که باید در مورد DOM مجازی بدانید. می توانید جزئیات بیشتر را در بخش مرجع بررسی کنید یا کمی بیشتر در گوگل جستجو کنید. هر گونه سوالی را در نظرات بنویسید. به زودی می بینمت.

مراجع

توضیح W3 در مورد DOM
React مستندات در مورد Virtual DOM
مقاله رایگان کد کمپ مجازی DOM