اگر با React کار کرده باشید و یا در حال یادگیری آن باشید، به احتمال زیاد اصطلاح Virtual DOM را شنیده‌اید. اما آیا می‌دانید DOM مجازی چیست و چرا React از آن استفاده می‌کند؟

DOM واقعی (Real DOM)

اول از همه باید ببینیم که DOM مخفف چه عبارتی است. در حقیقت، DOM مخفف Document Object Model است. DOM به زبان ساده بیانگر UI برنامه شماست. هر موقع که تغییری در UI برنامه شما ایجاد شود، DOM نیز به‌روز می‌شود تا نمایانگر آن تغییر باشد. پس اگر به طور متناوب تغییراتی در DOM ایجاد شود، بر روی عملکرد تاثیرگذار بوده و از سرعت آن می‌کاهد.

چه چیزی کارایی DOM را کند می‌کند؟

DOM به عنوان یک ساختار داده درختی نشان داده می‌شود. به همین دلیل، تغییرات و به‌روزرسانی‌های DOM سریع است. اما پس از تغییر، عنصری به‌روزرسانی می‌شود و در پی آن باید عناصری که به هر طریقی به آن مربوط‌ند نیز مجدداً رندر شوند؛ تا در نهایت به‌روزرسانی UI محقق شود. 

رندر مجدد و یا re-painting UI دقیقاً همان چیزی است که باعث کند شدن DOM می‌شود. بنابراین، هرچه مولفه UI شما بیشتر باشد، به همان میزان به‌روزرسانی DOM نیز زمانبرتر است. چرا که برای هر بروزرسانی DOM، تمامی مولفه‌ها مجددا رندر می‌شوند. 

با این حساب، چه باید کرد؟ چطور می‌توان از این اتفاق جلوگیری کرد؟ اینجاست که مفهوم Virtual DOM وارد عمل می‌شود و به مراتب بهتر از Real DOM عمل می‌کند.

DOM مجازی (Virtual DOM)

Virtual DOM فقط نمایش مجازی DOM است. هر زمان که وضعیت برنامه ما تغییر کند، Virtual DOM به جای Real DOM به‌روز می‌شود. 

حالا ممکن است بپرسید که “آیا Virtual DOM همان کاری را انجام نمی‌دهد که Real DOM انجام می‌دهد؟ به نظر می‌رسد که Virtual DOM یک کار اضافی است. و البته چگونه Virtual DOM می‌تواند سریع‌تر از Real DOM باشد؟”

بدون شک باید بگوییم که Virtual DOM بسیار سریع‌تر و کارآمدتر است. چرایی آن را در ادامه شرح می‌دهیم.

چرا Virtual DOM سریع‌تر است؟

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

پس از انجام این کار، Virtual DOM این تغییرات را به بهترین روش ممکن بر روی Real DOM اعمال می‌کند. این کار تضمین می‌کند که حداقل عملیات بر روی Real DOM انجام می‌شود. از این رو، هزینه بروزرسانی آن کاهش می‌یابد.

React چگونه از Virtual DOM استفاده می‌کند؟

اکنون که درک دقیقی از آنچه که در Virtual DOM اتفاق می‌افتد، به دست آوردید، زمان آن فرا رسیده است که به موضوع چگونگی استفاده React از Virtual DOM بپردازیم. 

در React، هر قطعه UI یک جزء است و هر یک از مولفه‌ها نیز حالتی دارند. React از الگوی قابل مشاهده پیروی می‌کند و گوش به زنگ است تا زمانی که حالت یکی از اجزاء تغییر کند. هنگام رخ دادن این اتفاق، React سریعاً درخت Virtual DOM را به‌روز می‌کند. پس از این بروزرسانی، React نسخه فعلی Virtual DOM را با نسخه قبلی آن مقایسه می‌کن که به این فرآیند diffing می‌گویند.‌

هنگامی که React اطلاع پیدا می‌کند که اشیایی در Virtual DOM تغییر کرده‌اند، React تنها آن اشیاء را در Real DOM بروزرسانی می‌کند. این امر باعث می‌شود عملکرد مقایسه به مراتب بهتر از مواقعی باشد که Real DOM را به صورت مستقیم دستکاری می‌کنیم. علاوه‌بر این، این کار باعث ایجاد React Standout می‌شود که با عنوان “یک کتابخانه جاوااسکریپت با عملکرد سطح بالا ” شناخته می‌شود.

به بیان ساده، شما وضعیت UI را به React گزارش می‌دهید تا از مطابقت کامل آن با DOM اطمینان حاصل کند. به عنوان یک توسعه دهنده نرم‌افزار، مزیت بزرگ چنین روشی در این است که دیگر نیازی به اطلاع یافتن از جزئیات صفات، تغییر رویدادها و به روزرسانی‌های DOM که در پشت صحنه اتفاق می‌افتند، نخواهید داشت.

همه این جزئیات به صورت خودکار و بدون ایجاد مزاحمت برای توسعه‌دهندگان React رخ می‌دهند. تنها کاری که شما باید انجام دهید این است که در مواقع لزوم مولفه‌های خود را به روزرسانی کرده و بقیه کارها را به React بسپارید. این روش یک تجربه عالی و برتر در دنیای کدنویسی را برای شما به ارمغان خواهد آورد.

تابع render در React

تابع render جایی است که رابط کاربری در آن به روز رسانی و رندر می‌شود. render یک بخش ضروری در چرخه زندگی متد React به شمار می‌رود. این تابع به عنوان یک نقطه ورود عمل کرده  و جایی است که درخت عناصر React در آن ایجاد می‌شوند. هنگامی که یک بخش در داخل یکی از مولفه‌ها به روزرسانی شد، تابع render درخت متفاوتی از عناصر React را باز می‌گرداند. چنانچه در داخل آن مولفه از تابع setState استفاده کرده باشید، React به سرعت تغییر حالت آن را تشخیص داده و مجدداً به رندر کردن آن مولفه می‌پردازد.

سپس React به دنبال راهی خواهد بود که بتواند به کارآمدترین شکل ممکن رابط کاربری را به منظور تطابق با آخرین تغییرات درخت به روز رسانی کند. در این حالت است که React ابتدا DOM مجازی خود را به روز رسانی کرده و پس از آن در قسمت DOM واقعی تنها به آپدیت اشیائی می‌پردازد که دچار تغییر شده باشند.

به روز رسانی خوشه‌ای (Batch Update)

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

جمع‌بندی

• تغییر و دستکاری در DOM بسیار هزینه‌بر بوده و نیاز به انجام عملیات سنگینی دارد.
• DOM مجازی به نوعی نمایندگی DOM واقعی را به عهده می‌گیرد.
• هنگامی که تغییری رخ دهد، DOM مجازی به روز رسانی شده و با نسخه قبلی خود مورد مقایسه قرار می‌گیرد. این عمل diffing نام دارد.
• سپس DOM مجازی به صورت گروهی اطلاعات به روز رسانی را برای DOM واقعی ارسال می‌کند تا اقدام به آپدیت UI نماید.
• React برای بهبود کارایی خود از DOM مجازی استفاده می‌کند.
• دلیل استفاده از این متد، ردیابی و شناسایی تغییرات ایجاد شده در حالت اشیا است.
• React برای مقایسه نسخه‌های مختلف DOM مجازی از یک الگوریتم diff کارآمد استفاده می‌کند.
• سپس از ارسال دسته‌ای به روز رسانی‌ها به سمت DOM واقعی برای رندر و یا طراحی مجدد UI اطمینان حاصل می‌کند.

[button class=”github-btn” href=”http://frontcast.ir/course/reactjs”]شروع یادگیری ReactJS[/button]

دیدگاه‌ها:

Masturdating

آذر 27, 1398  در  8:16 ب.ظ

سلام، با وجود دام مجازی دیگه نیازی به ajax نداریم؟

برای پاسخ دادن وارد شوید

مسعود صدری

آذر 28, 1398  در  12:10 ق.ظ

سلام
Ajax از مفاهیم Asynchronous توی جاوااسکریپت هست که می‌تونیم درخواست‌های HTTP رو با استفاده از اون به سرور ارسال کنیم. دام مجازی یک فیچر هست که React اون رو ارایه می‌ده برای سریع‌تر دانلود شدن المنت‌های اپلیکیشن. اگر امکانش هست سوالتون رو کمی واضح‌تر مطرح کنید.

افزودن دیدگاه جدید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.