با پیچیده‌تر شدن اپلیکیشن‌های وب، مدیریت به‌روزرسانی‌های رابط کاربری به یک کار چالش برانگیز تبدیل می‌شود. اینجاست که مفهوم Virtual DOM وارد عمل می‌شود. باید به این نکته توجه داشته باشیم که DOM مخفف عبارت Document Object Model می‌باشد.

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

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

در این مقاله قصد داریم تا مفاهیم مربوط به Virtual DOM در React را باهم بررسی کنیم.

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

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

در ادامه یک فرآیند گام‌به‌گام از نحوه عملکرد Virtual DOM را بررسی می‌کنیم:

  1. Initial Rendering: هنگامی که برنامه شروع به کار می‌کند، کل رابط کاربری به عنوان یک Virtual DOM نمایش داده می‌شود. المنت‌های React ایجاد شده و در ساختار مجازی ارائه می‌شوند.
  2. تغییرات State و Props: با تغییر stateها و propها در برنامه، React کامپوننت‌هایی که تحت تاثیر این تغییرات قرار گرفته‌اند را در Virtual DOM دوباره رندر می‌کند. این تغییرات بلافاصله بر روی Real DOM تاثیر نمی‌گذارد.
  3. مقایسه با استفاده از الگوریتم Diff: در این گام، React از یک الگوریتم متفاوت برای مقایسه نسخه فعلی Virtual DOM با نسخه قبلی استفاده می‌کند. این فرآیند، تفاوت‌های بین دو نسخه را مشخص می‌نماید.
  4. فرآیند Reconciliation: بر اساس تفاوت‌های شناسایی شده در گام سوم، React کارآمدترین راه را برای به‌روزرسانی Real DOM تعیین می‌کند. پس از آن، به جای رندر کردن مجدد کل رابط کاربری، فقط بخش‌هایی از Real DOM که نیاز به به‌روزرسانی دارند تغییر می‌کنند. این به‌روزرسانی انتخابی بسیار سریع و کارآمد می‌باشد.
  5. به‌روزرسانی Real DOM: در نهایت، React تغییرات لازم را در Real DOM اعمال می‌کند. این فرآیند ممکن است شامل افزودن، حذف یا به‌روزرسانی المنت‌ها بر اساس تفاوت‌های شناسایی‌شده در گام سوم باشد.

به عنوان مثال، فرض کنید ما functionality شمارنده زیر را در کامپوننت App داریم:

import React, { useState } from 'react';

function App() {
 const [count, setCount] = useState(0);

 return (
   <div>
     <h1>Counter: {count}</h1>
     <button onClick={() => setCount(count + 1)}>Increment</button>
   </div>
 );
}

export default App;

نمایش virtual DOM به شکل زیر خواهد بود:

{
 "type": "div",
 "props": {},
 "children": [
   {
     "type": "h1",
     "props": {},
     "children": [
       {
         "type": "TEXT_ELEMENT",
         "props": {
           "nodeValue": "Counter: 0"
         }
       }
     ]
   },
   {
     "type": "button",
     "props": {
       "onClick": "setCount(count + 1)"
     },
     "children": [
       {
         "type": "TEXT_ELEMENT",
         "props": {
           "nodeValue": "Increment"
         }
       }
     ]
   }
 ]
}

هنگامی که بر روی دکمه Increase یک بار کلیک می‌شود، فقط المنت h1 تغییر می‌کند:

{
 "type": "h1",
 "props": {},
 "children": [
   {
     "type": "TEXT_ELEMENT",
     "props": {
       "nodeValue": "Counter: 1"
     }
   }
 ]
}

مقایسه Virtual DOM با Real DOM در React

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

Real DOM یک رابط استاندارد داخلی در مرورگرها است که المنت‌های HTML، از تعریف Doctype و المنت root html گرفته تا هر المنت دیگری در آن را نشان می‌دهد و با آن‌ها تعامل دارد.  این Real DOM کل داکیومنت HTML را به عنوان یک ساختار درختی نشان داده و به جاوااسکریپت اجازه می‌دهد تا آن‌ها را دستکاری کرده و تغییر دهد. گاهی اوقات وقتی که این تغییرات رخ می‌دهد، ممکن است کل داکیومنت دوباره رندر شود.

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

مزایای استفاده از Virtual DOM در توسعه وب

ساده‌تر شدن توسعه

Virtual DOM به ما این امکان را می‌دهد تا کدی که داریم را با استایل واضح‌تری بنویسیم. این بدان معناست که به جای نوشتن دستورالعمل‌های دقیق در مورد نحوه به‌روزرسانی رابط کاربری، می‌توانیم به سادگی توصیف کنیم که رابط کاربری چگونه باید باشد و React بقیه موارد را بر عهده می‌گیرد. این امر با سینتکس declarative و معماری مبتنی بر کامپوننت React امکان‌پذیر شده است.

بهبود عملکرد

یکی از مزایای اصلی استفاده از Virtual DOM در React، بهبود عملکرد قابل توجهی است که ارائه می‌دهد. از آن جایی که دستکاری مستقیم Real DOM کند است و می‌تواند منجر به مشکلات عملکرد، به ویژه در برنامه‌های پیچیده شود، استفاده از Virtual DOM منطقی‌تر می‌باشد.

بهبود تجربه کاربری

Virtual DOM با اطمینان از اینکه به‌روزرسانی‌های رابط کاربری روان، ریسپانسیو و بدون نیاز به refresh تمام صفحه هستند، به تجربه کاربری بهتر کمک می‌کند. بنابراین، کاربران کم‌تر احتمال دارد که تاخیر یا jank را تجربه کنند، که در نتیجه تعامل یکپارچه‌تر با برنامه ایجاد می‌شود.

امکان توسعه Cross-platform

اصول Virtual DOM فقط به توسعه وب محدود نمی‌شود. React Native، که نسخه‌ای از React برای ساخت برنامه‌های موبایل cross-platform یا چند پلتفرمی است، از رویکرد مشابهی استفاده می‌کند. این کار باعث افزایش بهره‌وری و کاهش زمان توسعه می‌شود، زیرا می‌توانیم از کدی که داریم، در پلتفرم‌های وب و موبایل به صورت مجدد استفاده نماییم.

باورهای غلط رایج در مورد Virtual DOM

چند باور غلط در مورد Virtual DOM وجود دارد. در ادامه به پنج مورد از این باورهای غلط و واقعیت هر یک از آن‌ها خواهیم پرداخت.

Virtual DOM یکی از ویژگی‌های مرورگر است

واقعیت: Virtual DOM یک انتزاع است که توسط React پیاده‌سازی شده است، نه یک ویژگی مرورگر. مرورگرها دارای Real DOM هستند، که روشی استاندارد برای نمایش و تعامل با داکیومنت‌های HTML است. Virtual DOM تنها در حافظه React وجود دارد و برای بهینه‌سازی به‌روزرسانی‌های Real DOM استفاده می‌شود.

Virtual DOM جایگزین Real DOM می‌شود

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

React تنها کتابخانه و فریم‌ورکی است که از Virtual DOM استفاده می‌کند

واقعیت: React فقط مفهوم Virtual DOM را رایج کرده است، ولی تنها کتابخانه یا فریم‌ورکی نیست که از آن استفاده می‌کند. فریم‌ورک‌های دیگری مانند VueJS و SolidJS نیز از Virtual DOM برای به‌روزرسانی رابط کاربری استفاده می‌کنند.

Virtual DOM تمام مشکلات مربوط به عملکرد را حل می‌کند

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

Virtual DOM و Shadow DOM یکسان هستند

واقعیت: Virtual DOM و shadow DOM یکسان نیستند. Virtual DOM یک کپی از Real DOM است که React با آن به‌روزرسانی‌های رابط کاربری را بهینه می‌کند. از طرف دیگر، shadow DOM یک فناوری مرورگر است که برای کپسوله کردن استایل‌ها و ساختار کامپوننت‌های وب مورد استفاده قرار می‌گیرد.

جمع‌بندی

همانطور که در این مقاله خواندیم، Virtual DOM یکی از ویژگی‌های کلیدی React است که عملکرد و به‌روزرسانی‌های کارآمد رابط کاربری را افزایش می‌دهد. با این کار، React می‌تواند به‌روزرسانی‌های batch، جریان‌های minimize و repaintها را به حداقل برساند و تغییرات را به‌طور مؤثرتری اعمال کند. این موضوع باعث می‌شود تا به‌روزرسانی‌های رابط کاربری سریع و روان انجام شوند و تجربه کاربری بهتری در این فرآیند ارائه شود.

درک Virtual DOM و نحوه عملکرد آن می‌تواند به ما در ساخت برنامه‌های کاربردی React کمک کند.