React.js Virtual DOM چیست؟

3 تیر, 1402

بدون دیدگاه

Virtual DOM چیست و دلیل استفاده از آن چیست؟

ابتدا اجازه دهید با تعریف DOM شروع کنیم.

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

آپدیت‌کردن DOM

اگر کمی در مورد جاوا اسکریپت می دانید، ممکن است افرادی را دیده باشید که از متد «getElementById()» یا «getElementsByClassName()» برای تغییر محتوای DOM استفاده می کنند. هر بار که تغییری در وضعیت برنامه شما ایجاد می شود، DOM به روز می شود تا آن تغییر را در UI منعکس کند. از آنجایی که DOM به عنوان یک درخت نمایش داده می‌شود، به‌روزرسانی درخت در اینجا عملیات پرهزینه‌ای نیست، در واقع ما الگوریتم‌های زیادی روی درختان داریم تا به‌روزرسانی‌ها را سریع انجام دهیم. آنچه که هزینه بر است این است که هر بار که DOM به روز می شود، عنصر به روز شده و فرزندان آن باید دوباره رندر شوند تا رابط کاربری صفحه ما به روز شود. برای این کار، هر بار که یک به‌روزرسانی مؤلفه وجود دارد، DOM باید به‌روزرسانی شود و مؤلفه‌های UI باید دوباره رندر شوند.

مثال :

// Simple getElementById() method
document.getElementById('some-id').innerValue = 'updated value';

هنگام نوشتن کد بالا در کنسول یا فایل جاوا اسکریپت، این موارد اتفاق می افتد:

مرورگر HTML را برای یافتن گره با این شناسه تجزیه می کند.
عنصر فرزند این عنصر خاص را حذف می کند.
عنصر (DOM) را با "مقدار به روز شده" به روز می کند.
CSS را برای گره های والد و فرزند دوباره محاسبه می کند.
طرح بندی را به روز کنید.
در نهایت، درخت را طی کنید و آن را روی صفحه نمایش (مرورگر) رنگ کنید.

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

DOM مجازی

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

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

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

چگونه DOM مجازی به React.js کمک می کند

در React.js، همه چیز به عنوان یک مؤلفه در نظر گرفته می شود، چه یک مؤلفه عملکردی یا یک مؤلفه کلاس. یک جزء می تواند شامل یک حالت باشد. هر بار که چیزی را در فایل JSX خود تغییر می‌دهیم یا آن را به زبان ساده بیان می‌کنیم، هر زمان که وضعیت هر جزء تغییر می‌کند، واکنش درخت DOM مجازی آن را به‌روزرسانی می‌کند. اگرچه ممکن است به نظر بی اثر باشد، اما هزینه چندان قابل توجهی نیست، زیرا به روز رسانی DOM مجازی زمان زیادی نمی برد. React.js هر بار دو Virtual DOM را نگه می‌دارد، یکی حاوی Virtual DOM به‌روزرسانی‌شده، و دیگری که فقط نسخه پیش‌به‌روزرسانی این DOM مجازی به‌روزرسانی شده است. اکنون نسخه پیش به‌روزرسانی را با Virtual DOM به‌روزرسانی‌شده مقایسه می‌کند و متوجه می‌شود که دقیقاً چه چیزی در DOM تغییر کرده است، مانند کدام مؤلفه‌ها تغییر کرده‌اند. این فرآیند مقایسه درخت DOM مجازی فعلی با درخت قبلی به عنوان "تفاوت" شناخته می شود. هنگامی که React.js متوجه شد دقیقاً چه چیزی تغییر کرده است، فقط آن اشیاء را در DOM واقعی به روز می کند. React.js از چیزی به نام بروزرسانی دسته ای برای به روز رسانی DOM واقعی استفاده می کند. این فقط به این معنی است که تغییرات به DOM واقعی به جای ارسال هر گونه به روز رسانی برای یک تغییر در وضعیت یک جزء، به صورت دسته ای ارسال می شود. دیده‌ایم که رندر کردن مجدد رابط کاربری گران‌ترین بخش است و React.js با اطمینان از اینکه Real DOM به‌روزرسانی‌های دسته‌ای را برای رندر مجدد UI دریافت می‌کند، این کار را به بهترین نحو انجام می‌دهد. کل این فرآیند تبدیل تغییرات به DOM واقعی، آشتی نامیده می شود.

این به طور قابل توجهی عملکرد را بهبود می بخشد و دلیل اصلی محبوبیت React.js و DOM مجازی آن توسط توسعه دهندگان در سراسر جهان است.