با پیچیده‌تر شدن برنامه‌های کاربردی وب، مدیریت به‌روزرسانی‌های رابط کاربری به یک کار چالش برانگیز تبدیل می‌شود. اینجاست که Virtual DOM (مدل شیء سند) وارد عمل می شود – به ویژه در React، کتابخانه پیشرو جاوا اسکریپت برای ساخت رابط های کاربری.

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

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

در این مقاله یاد خواهید گرفت:

DOM مجازی چیست و چگونه کار می کند

چگونه DOM مجازی با DOM واقعی مقایسه می شود

مزایای استفاده از DOM مجازی

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

چگونه DOM مجازی با DOM سایه مقایسه می شود

تصورات غلط رایج در مورد DOM مجازی

DOM مجازی چیست و چگونه کار می کند؟

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

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

مرحله 1 - رندر اولیه : وقتی برنامه شروع به کار کرد، کل UI به عنوان یک DOM مجازی نمایش داده می شود. عناصر React ایجاد و در ساختار مجازی ارائه می شوند.

مرحله 2 – تغییرات وضعیت و Props : با تغییر حالت ها و ویژگی های برنامه، React مؤلفه های آسیب دیده را در DOM مجازی مجدداً نمایش می دهد. این تغییرات فوراً بر DOM واقعی تأثیر نمی گذارد.

مرحله 3 – مقایسه با استفاده از الگوریتم Diff : React سپس از یک الگوریتم diffing برای مقایسه نسخه فعلی Virtual DOM با نسخه قبلی استفاده می کند. این فرآیند تفاوت‌ها (یا «تفاوت‌ها») بین دو نسخه را مشخص می‌کند.

مرحله 4 - فرآیند آشتی : بر اساس تفاوت های شناسایی شده، React کارآمدترین راه را برای به روز رسانی DOM واقعی تعیین می کند. فقط بخش‌هایی از DOM واقعی که نیاز به به‌روزرسانی دارند، به جای رندر کردن مجدد کل رابط کاربری، تغییر می‌کنند. این به روز رسانی انتخابی سریع و کارآمد است.

مرحله 5 - به روز رسانی به DOM واقعی : در نهایت، React تغییرات لازم را در DOM واقعی اعمال می کند. این ممکن است شامل گفت ن، حذف یا به‌روزرسانی عناصر بر اساس تفاوت‌های شناسایی‌شده در مرحله 3 باشد.

به عنوان مثال، فرض کنید عملکرد شمارنده زیر را در مؤلفه 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;

نمایش 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" } } ] }

مقایسه DOM مجازی با DOM واقعی

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

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

این DOM واقعی کل سند HTML را به عنوان یک ساختار درختی نشان می دهد و به جاوا اسکریپت اجازه می دهد اسناد HTML را دستکاری و تغییر دهد. گاهی اوقات وقتی این تغییرات رخ می دهد، کل سند ممکن است دوباره ارائه شود.

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

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

توسعه ساده شده

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

عملکرد بهبود یافته

یکی از مزایای اصلی استفاده از DOM مجازی، بهبود عملکرد قابل توجهی است که ارائه می دهد. دستکاری مستقیم DOM واقعی کند است و می تواند منجر به مشکلات عملکرد، به خصوص در برنامه های پیچیده شود.

تجربه کاربری پیشرفته

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

توسعه چند پلتفرمی

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

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

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

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

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

Virtual DOM جایگزین DOM واقعی می شود

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

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

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

DOM مجازی تمام مشکلات عملکرد را حل می کند

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

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

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

DOM واقعی در مقابل DOM مجازی در مقابل Shadow DOM

اکنون که ثابت کردیم DOM مجازی، DOM سایه‌دار و DOM واقعی یکسان نیستند، بیایید به تفاوت‌های این سه مورد نگاه کنیم.

نتیجه

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

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

React و Next JS را یاد بگیرید

آیا می‌خواهید آپشن های جالب React مانند DOM مجازی را کشف کنید؟ در دوره React 18 من در Udemy ثبت نام کنید! من شما را در دنیای React با ایجاد یک بازی جذاب 2048 با انیمیشن‌هایی از ابتدا راهنمایی می‌کنم.

خبرکاو