با پیچیده‌تر شدن اپلیکیشن‌های وب، مدیریت بهروزرسانیهای رابط کاربری به یک کار چالش برانگیز تبدیل می‌شود. اینجاست که مفهوم 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 یک نمایش درون حافظه از المنت‌های Real DOM است. React به جای این که تعامل مستقیم با Real DOM داشته باشد، که از نظر عملکرد می‌تواند کند و پرهزینه باشد، یک نمایش مجازی از کامپوننت‌های رابط کاربری ایجاد می‌کند. این نمایش مجازی یک آبجکت جاوااسکریپت است که ساختار Real DOM را منعکس می‌کند.
در ادامه یک فرآیند گام‌به‌گام از نحوه عملکرد Virtual 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 را بدانیم. Real DOM و Virtual DOM هر دو اهداف مشابهی را دنبال می‌کنند، اما به روش‌های متفاوتی عمل می‌کنند که پیامدهای مهمی برای عملکرد و کارایی دارد.
Real DOM یک رابط استاندارد داخلی در مرورگرها است که المنت‌های HTML، از تعریف Doctype و المنت root html گرفته تا هر المنت دیگری در آن را نشان می‌دهد و با آن‌ها تعامل دارد. این Real DOM کل داکیومنت HTML را به عنوان یک ساختار درختی نشان داده و به جاوااسکریپت اجازه می‌دهد تا آن‌ها را دستکاری کرده و تغییر دهد. گاهی اوقات وقتی که این تغییرات رخ می‌دهد، ممکن است کل داکیومنت دوباره رندر شود.
این موضوع برخلاف Virtual DOM است که از یک الگوریتم diff برای مقایسه نسخه فعلی و قبلی بهروزرسانیهای DOM استفاده می‌کند. Virtual DOM به جای رندر کل رابط کاربری، فقط بخش‌هایی از آن را که تغییر کرده‌اند دوباره رندر می‌کند.
Virtual DOM به ما این امکان را می‌دهد تا کدی که داریم را با استایل واضح‌تری بنویسیم. این بدان معناست که به جای نوشتن دستورالعمل‌های دقیق در مورد نحوه به‌روزرسانی رابط کاربری، می‌توانیم به سادگی توصیف کنیم که رابط کاربری چگونه باید باشد و React بقیه موارد را بر عهده می‌گیرد. این امر با سینتکس declarative و معماری مبتنی بر کامپوننت React امکان‌پذیر شده است.
یکی از مزایای اصلی استفاده از Virtual DOM در React، بهبود عملکرد قابل توجهی است که ارائه می‌دهد. از آن جایی که دستکاری مستقیم Real DOM کند است و می‌تواند منجر به مشکلات عملکرد، به ویژه در برنامه‌های پیچیده شود، استفاده از Virtual DOM منطقی‌تر می‌باشد.
Virtual DOM با اطمینان از اینکه بهروزرسانیهای رابط کاربری روان، ریسپانسیو و بدون نیاز به refresh تمام صفحه هستند، به تجربه کاربری بهتر کمک می‌کند. بنابراین، کاربران کم‌تر احتمال دارد که تاخیر یا jank را تجربه کنند، که در نتیجه تعامل یکپارچه‌تر با برنامه ایجاد می‌شود.
اصول Virtual DOM فقط به توسعه وب محدود نمی‌شود. React Native، که نسخه‌ای از React برای ساخت برنامه‌های موبایل cross-platform یا چند پلتفرمی است، از رویکرد مشابهی استفاده می‌کند. این کار باعث افزایش بهره‌وری و کاهش زمان توسعه می‌شود، زیرا می‌توانیم از کدی که داریم، در پلتفرم‌های وب و موبایل به صورت مجدد استفاده نماییم.
چند باور غلط در مورد Virtual DOM وجود دارد. در ادامه به پنج مورد از این باورهای غلط و واقعیت هر یک از آن‌ها خواهیم پرداخت.
واقعیت: Virtual DOM یک انتزاع است که توسط React پیاده‌سازی شده است، نه یک ویژگی مرورگر. مرورگرها دارای Real DOM هستند، که روشی استاندارد برای نمایش و تعامل با داکیومنت‌های HTML است. Virtual DOM تنها در حافظه React وجود دارد و برای بهینه‌سازی بهروزرسانیهای Real DOM استفاده می‌شود.
واقعیت: Virtual DOM به عنوان یک واسطه بین React و مرورگر عمل می‌کند، و جایگزینی برای Real DOM محسوب نمی‌شود. Real DOM هنوز همان چیزی است که مرورگر برای ارائه رابط کاربری استفاده می‌کند، اما بهروزرسانیهای آن از طریق Virtual DOM مدیریت می‌شود.
واقعیت: React فقط مفهوم Virtual DOM را رایج کرده است، ولی تنها کتابخانه یا فریم‌ورکی نیست که از آن استفاده می‌کند. فریم‌ورک‌های دیگری مانند VueJS و SolidJS نیز از Virtual DOM برای به‌روزرسانی رابط کاربری استفاده می‌کنند.
واقعیت: Virtual DOM می‌تواند عملکرد را به میزان قابل توجهی بهبود بخشد، اما راه حلی جادویی برای همه مشکلات نیست. شیوه‌های کدنویسی ضعیف، رندرهای غیرضروری و درخت‌های کامپوننت بزرگ همچنان می‌توانند منجر به ایجاد مشکلات عملکرد شوند.
واقعیت: Virtual DOM و shadow DOM یکسان نیستند. Virtual DOM یک کپی از Real DOM است که React با آن بهروزرسانیهای رابط کاربری را بهینه می‌کند. از طرف دیگر، shadow DOM یک فناوری مرورگر است که برای کپسوله کردن استایل‌ها و ساختار کامپوننت‌های وب مورد استفاده قرار می‌گیرد.
همانطور که در این مقاله خواندیم، Virtual DOM یکی از ویژگی‌های کلیدی React است که عملکرد و بهروزرسانیهای کارآمد رابط کاربری را افزایش می‌دهد. با این کار، React می‌تواند بهروزرسانیهای batch، جریان‌های minimize و repaintها را به حداقل برساند و تغییرات را به‌طور مؤثرتری اعمال کند. این موضوع باعث می‌شود تا بهروزرسانیهای رابط کاربری سریع و روان انجام شوند و تجربه کاربری بهتری در این فرآیند ارائه شود.
درک Virtual DOM و نحوه عملکرد آن می‌تواند به ما در ساخت برنامه‌های کاربردی React کمک کند.
۵۰ درصد تخفیف ویژه برای ثبت نام در دوره آموزش React – مقدماتی تا پیشرفته تا پایان امروز
کد تخفیف: react
دیدگاه‌ها: