درک Virtual DOM در React

اگر شما از React استفاده می کنید یا در حال یادگیری React هستید،به احتمال زیاد اصطلاح “Virtual DOM” رو شنیدید.در این مقاله قصد داریم توضیح بدیم که Virtual DOM چیه و React چرا از اون استفاده میکنه. Real DOM اولین مفهومی که شما باید بدونید DOM هست که مخفف کلمات “Document Object Model” است.اگر بخوایم DOM رو توضیح بدیم در ساده ترین تعریف میشه گفت:DOM نشان دهنده UI وب سایت(اپلیکیشن) شما است.هر تغییری که در وضعیت UI اپلیکیشن یا وب سایت شما رخ میدهد،DOM بروزرسانی می شود تا تغییرات را به شما نمایش دهد.تغییرات در DOM غالبا در عملکرد تاثیر میگذارد و باعث کاهش عملکرد می شود. چه تغییرات در DOM باعث کاهش عملکرد می شود؟ ا DOM به عنوان یک ساختار داده درختی ارائه شده است.اگر به عکس بالا توجه کنید کامل متوجه این موضوع خواهید شد و بخاطر این ساختار تغییرات و بروزسانی DOM سریع است.اما بعد از تغییرات ،element بروزشده و فرزندانش re-rendere می شوند تا UI اپلیکیشن بروز شود.این re-rendering یا re-painting رابط کاربری(UI) باعث کاهش عملکرد می شود.بنابراین هر چقدر که تعداد کامپوننت های UI شما بیشتر باشد بروزرسانی DOM برای شما گران تر تمام خواهد شد و عملکرد و سرعت اپلیکیشن شما کاهش پیدا خواهد کرد زیرا برای هر بروزرسانی DOM باید این کامپوننت ها re-render شود. Virtual DOM چیستبه طور قابل توجهی بهتر از DOM واقعی عمل می کند. virtual DOM در واقعی یک ارائه مجازی از DOM است.هر زمانی که وضعیت اپلیکیشن ما تغییر می کند به جای DOM این virtual DOM است که بروز رسانی می شود.ممکنه اینجا این سوال تو ذهنتون به وجود بیاد که virtual DOM داره کار DOM رو انجام میده و چه کاریه که دوربار این عملیات انجام بشه؟؟چطور میتونه از بروزرسانی DOM واقعی سریعتر باشه.جواب این سوال که جطور virtual DOM به طور قابل توجهی از DOM سریعتر هست رو میتونید در ادامه بخونید.Virtual DOM چگونه سریعتر است؟ زمانی که یک element جدید به UI اضافه می شود، یک virtual DOM که به شکل یک درخت نمایش داده می شود، ایجاد می شود.هر element یک گره(node) از درخت است.اگر وضعیت هر یک از این element ها تغییر پیدا کند، یک درخت virtual DOM جدید ایجاد می شود.این درخت با virtual DOM قبلی مقایسه می شود.زمانی که این کار انجام می شود، virtual DOM بهترین روش ممکن برای ایجاد تغییرات به DOM واقعی را محاسبه می کند.این تضمین میکند که حداقل عملیات در DOM واقعی وجود دارد.پس هزینه های بروزرسانی DOM واقعی را کاهش می دهد. تصوبر زیر درخت virtual DOM و فرآیند مقایسه را نشان می دهد. دایره های قرمز نشان دهنده گره هایی هستند که تغییر کرده اند.این گره نشان دهنده element های UI هست که وضعیتشان تغییر پیدا کرده است.تفاوت بین درخت قبلی virtual DOM و درخت فعلی virtual DOM محاسبه می شود.تمام زیرمجموعه های گره پدر re-render می شود تا UI به روزرسانی شود.این درخت به روز شده DOM واقعی را به روز می کند. ری اکت چگونه از virtual DOM استفاده می کند؟حالا که شما یک درک کامل از virtual DOM پیدا کردید و متوجه شدید که چطور به عملکرد برنامه شما کمک میکند،وقت آن است که درمود نحوه استفاده React از virtual DOM اطلاعاتی کسب کنیم.در React هر تیکه از UI یک کامپوننت است و هر کامپوننت یک state دارد.React یک الگو قابل مشاهده را دنبال می کند و به تغییرات state گوش می دهد.زمانی که state کامپوننت تغییر پیدا کرد، React درخت virtual DOM را بروز رسانی می کند.از آنجایی که virtual DOM بروز شده است، React درخت فعلی virtual DOM را با درخت قبلی مقایسه می کند. این فرآیند “diffing” نامیده می شود.از آنجایی که React می داند virtual DOM objects تغییر پیدا کرده است پس فقط این objects را در DOM واقعی بروز می کند.این فرآیند باعث می شود تا عملکرد بهتر از زمانی باشد که مقایسه مستقیم بر روی DOM واقعی انجام می شود.این فرآیند React را به عنوان یک کتابخانه جاوا اسکریپت با عملکرد بالا برجسته می کند.به عبارت ساده شما به React می گویید که چه وضعیتی از Ui را می خواهید و آن مطمئن می شود که این وضعیت با DOM سازگار است.مزیت بزرگ در اینجا این است که به عنوان یک توسعه دهنده لازم نیست بدانید که چگونه attribute دستکاری می شوند، event ها چگونه مدیریت می شوند یا بروزرسانی دستی DOM در پشت صحنه اتفاق می افتد.همه این جزئیات به دور از توسعه دهندگان React است.یعنی شما نیازی به دخالت در این جزئیات و دونستن اون ها ندارید.همه چیزهایی که شما باید بدانید این است که وضعیت کامپوننت خود را همانطور که لازم است تغییر بدهید و بروز کنید،React بقیه کارها را انجام می دهد.این یک تجربه عالی و منحصر به فرد است که توسعه دهندگان React از اون بهره می برند.بروز رسانی دسته ای(Batch Update)ری اکت از یک مکانیزم بروزرسانی دسته ای برای بروزرسانی DOM واقعی استفاده می کند.این کار باعث افزایش چشمگیر عملکرد برنامه می شود.این به این معنی است که بروزرسانی DOM واقعی در دسته های ارسال شده به جای ارسال بروزرسانی برای هر تغییر state است.بازنویسی UI بخش پرهزینه ای است که React تضمین می کند DOM واقعی به روزرسانی ها را به صورت دسته ای دریافت می کند. خلاصهدستکاری های مکرر DOM واقعی پرهزینه هستند و باعث کاهش عملکرد برنامه می شود.رVirtual DOM یک ارائه مجازی از DOM است.وقتی state تغییر می کند، DOM مجازی به روز می شود و نسخه قبلی و فعلی Virtual DOM رو مقایسه می کند.این فرآیند “diffing” نامیده می شود.رvirtual DOM بروزرسانی ها را به صورت دسته ای برای DOM واقعی به منظور بروزسانی UI ارسال می کند.ری اکت از virtual DOM برای بهبود عملکرد استفاده می کند.ری اکت از observable برای تشخیص تغییرات state و prop استفاده می کند.ری اکت از diff الگوریتم برای مقایسه نسخه های virtual DOM استفاده می کند.