معرفی Virtual DOM و مفاهیم اصلی React

مقدمه

در درس‌های گذشته، به رویکرد «اعلانی» (Declarative) React اشاره کردیم. ما به React می‌گوییم که UI ما در هر وضعیتی باید چگونه باشد، و خود React مسئولیت به‌روزرسانی DOM را بر عهده می‌گیرد. اما این فرآیند چگونه در پشت صحنه کار می‌کند؟ چگونه React می‌تواند به‌روزرسانی‌های مکرر را به صورت بهینه انجام دهد؟ پاسخ در یکی از مهم‌ترین نوآوری‌های React نهفته است: Virtual DOM.

Virtual DOM چیست؟

«دام مجازی» یا Virtual DOM (VDOM) یک مفهوم برنامه‌نویسی است که در آن، یک نمایش مجازی از رابط کاربری (UI) در حافظه نگهداری شده و با DOM واقعی همگام‌سازی می‌شود. به عبارت ساده‌تر، Virtual DOM یک کپی سبک از DOM واقعی است که به صورت یک شیء جاوااسکریپت وجود دارد.

چرا به Virtual DOM نیاز داریم؟

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

فرآیند به‌روزرسانی در React

React با استفاده از Virtual DOM این فرآیند را به شکل هوشمندانه‌ای بهینه می‌کند:

1. تغییر وضعیت (State Change): وقتی state یک کامپوننت تغییر می‌کند، React یک درخت Virtual DOM جدید ایجاد می‌کند که UI را در وضعیت جدید توصیف می‌کند.
2. مقایسه (Diffing): React سپس این درخت Virtual DOM جدید را با نسخه قبلی آن (که قبل از تغییر state در حافظه نگه داشته شده بود) مقایسه می‌کند. این فرآیند مقایسه به نام «الگوریتم تطبیق» یا Diffing Algorithm شناخته می‌شود.
3. به‌روزرسانی دسته‌ای (Batch Update): React با استفاده از این مقایسه، دقیقاً تشخیص می‌دهد که کدام بخش‌ها از DOM واقعی نیاز به تغییر دارند. سپس، به جای اعمال تک به تک این تغییرات، آنها را به صورت یک عملیات دسته‌ای (batch) و به بهینه‌ترین شکل ممکن روی DOM واقعی اعمال می‌کند.

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

مرور مفاهیم اصلی

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

۱. کامپوننت‌ها (Components)

همانطور که اشاره شد، کامپوننت‌ها بلوک‌های سازنده اصلی در React هستند. هر کامپوننت یک قطعه مستقل و قابل استفاده مجدد از UI است که منطق و ساختار خود را کپسوله می‌کند. ما در این دوره عمدتاً با «کامپوننت‌های تابعی» (Functional Components) کار خواهیم کرد.

JAVASCRIPT (React)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

۲. پراپ‌ها (Props)

«پراپ‌ها» یا Props (مخفف properties) روشی برای ارسال داده از یک کامپوننت والد به یک کامپوننت فرزند هستند. propsها تغییرناپذیر (immutable) هستند، به این معنی که یک کامپوننت هرگز نباید propsهای خود را مستقیماً تغییر دهد. این جریان داده یک‌طرفه، درک و دیباگ کردن برنامه را بسیار ساده‌تر می‌کند.

JAVASCRIPT (React)

// The `Welcome` component receives `name` as a prop.
const element = <Welcome name="Sara" />;

۳. وضعیت (State)

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

JAVASCRIPT (React)

import { useState } from 'react';

function Counter() {
  // `count` is a state variable. `setCount` is the function to update it.
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

در این درس، ما با مکانیزم Virtual DOM به عنوان دلیل اصلی عملکرد بالای React و همچنین سه مفهوم کلیدی کامپوننت، props و state آشنا شدیم. این مفاهیم، الفبای برنامه‌نویسی در React هستند و در تمام درس‌های آینده با آنها سروکار خواهیم داشت. در درس بعدی، به بررسی «کاربردهای React در پروژه‌های واقعی» خواهیم پرداخت و خواهیم دید که چه شرکت‌ها و اپلیکیشن‌های بزرگی از این کتابخانه قدرتمند استفاده می‌کنند.