virtual DOM در React.js

Virtual DOM (Virtual Document Object Model) یک مفهوم کلیدی در کتابخانه ری‌اکت است که به بهبود عملکرد و کارایی رابط کاربری (UI) کمک می‌کند.

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

برای حل این مشکل، ری‌اکت از یک Virtual DOM استفاده می‌کند. Virtual DOM یک کپی سبک و مجازی از DOM واقعی است که در حافظه نگه‌داری می‌شود. وقتی که تغییری در وضعیت (state) یا داده‌های یک کامپوننت رخ می‌دهد، ری‌اکت ابتدا این تغییرات را در Virtual DOM اعمال می‌کند. سپس ری‌اکت با مقایسه این نسخه مجازی با نسخه قبلی، تنها تغییرات لازم را شناسایی کرده و آن‌ها را به صورت بهینه به DOM واقعی اعمال می‌کند. این فرایند به نام “Diffing” یا “Reconciliation” شناخته می‌شود.

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

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

import React, { useState } from 'react';

function Counter() {
  // استفاده از Hook useState برای مدیریت وضعیت (state) شمارنده
  const [count, setCount] = useState(0);

  // تابعی که با هر بار کلیک روی دکمه، شمارنده را افزایش می‌دهد
  const incrementCount = () => {
    setCount(count + 1);
  };

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

export default Counter;

توضیحات:

1. useState: ما از هوک useState برای مدیریت وضعیت شمارنده استفاده می‌کنیم. مقدار اولیه شمارنده برابر ۰ تنظیم شده است.
2. incrementCount: این تابع هر بار که کاربر روی دکمه کلیک می‌کند، اجرا می‌شود و مقدار شمارنده را افزایش می‌دهد.
3. Virtual DOM: وقتی کاربر روی دکمه کلیک می‌کند، ری‌اکت ابتدا وضعیت جدید (state) را در Virtual DOM محاسبه می‌کند. سپس آن را با نسخه قبلی Virtual DOM مقایسه می‌کند. ری‌اکت فقط قسمت‌های تغییر یافته (که در اینجا مقدار شمارنده است) را در DOM واقعی به‌روزرسانی می‌کند.

نتیجه:

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