تشخیص تغییر با experimental_useMutableSource در React: تسلط بر داده‌های تغییرپذیر

ری‌اکت، که به خاطر رویکرد اعلانی و رندرینگ کارآمدش شناخته می‌شود، معمولاً مدیریت داده‌های تغییرناپذیر (immutable) را تشویق می‌کند. با این حال، سناریوهای خاصی کار با داده‌های تغییرپذیر (mutable) را ضروری می‌سازند. هوک experimental_useMutableSource ری‌اکت، که بخشی از APIهای آزمایشی حالت همزمانی (Concurrent Mode) است، مکانیزمی برای یکپارچه‌سازی منابع داده تغییرپذیر در کامپوننت‌های ری‌اکت شما فراهم می‌کند و امکان تشخیص تغییرات دقیق و بهینه‌سازی را می‌دهد. این مقاله به بررسی تفاوت‌های ظریف experimental_useMutableSource، مزایا، معایب و مثال‌های عملی آن می‌پردازد.

درک داده‌های تغییرپذیر در React

قبل از پرداختن به experimental_useMutableSource، درک این نکته که چرا داده‌های تغییرپذیر می‌توانند در ری‌اکت چالش‌برانگیز باشند، بسیار مهم است. بهینه‌سازی رندرینگ ری‌اکت به شدت به مقایسه وضعیت‌های قبلی و فعلی برای تعیین اینکه آیا یک کامپوننت نیاز به رندر مجدد دارد یا خیر، متکی است. هنگامی که داده‌ها مستقیماً تغییر داده می‌شوند، ممکن است ری‌اکت این تغییرات را تشخیص ندهد و این امر منجر به ناهماهنگی بین UI نمایش داده شده و داده‌های واقعی می‌شود.

سناریوهای رایجی که داده‌های تغییرپذیر در آن‌ها به وجود می‌آیند:

• یکپارچه‌سازی با کتابخانه‌های خارجی: برخی کتابخانه‌ها، به ویژه آنهایی که با ساختارهای داده پیچیده یا به‌روزرسانی‌های آنی سروکار دارند (مانند برخی کتابخانه‌های نمودارسازی، موتورهای بازی)، ممکن است داده‌ها را به صورت داخلی به شکل تغییرپذیر مدیریت کنند.
• بهینه‌سازی عملکرد: در بخش‌های خاصی که عملکرد در آن‌ها حیاتی است، تغییر مستقیم ممکن است مزایای جزئی نسبت به ایجاد کپی‌های کاملاً جدید و تغییرناپذیر داشته باشد، اگرچه این کار به قیمت پیچیدگی و احتمال بروز باگ تمام می‌شود.
• کدبیس‌های قدیمی: مهاجرت از کدبیس‌های قدیمی‌تر ممکن است شامل کار با ساختارهای داده تغییرپذیر موجود باشد.

در حالی که داده‌های تغییرناپذیر به طور کلی ترجیح داده می‌شوند، experimental_useMutableSource به توسعه‌دهندگان اجازه می‌دهد تا شکاف بین مدل اعلانی ری‌اکت و واقعیت‌های کار با منابع داده تغییرپذیر را پر کنند.

معرفی experimental_useMutableSource

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

امضای هوک:

const value = experimental_useMutableSource(mutableSource, getSnapshot, subscribe);

پارامترها:

• mutableSource: یک شیء که منبع داده تغییرپذیر را نشان می‌دهد. این شیء باید راهی برای دسترسی به مقدار فعلی داده و اشتراک در تغییرات را فراهم کند.
• getSnapshot: تابعی که mutableSource را به عنوان ورودی می‌گیرد و یک تصویر لحظه‌ای (snapshot) از داده‌های مربوطه را برمی‌گرداند. این تصویر برای مقایسه مقادیر قبلی و فعلی جهت تعیین نیاز به رندر مجدد استفاده می‌شود. ایجاد یک تصویر لحظه‌ای پایدار بسیار مهم است.
• subscribe: تابعی که mutableSource و یک تابع callback را به عنوان ورودی می‌گیرد. این تابع باید callback را برای تغییرات در منبع داده تغییرپذیر مشترک کند. هنگامی که داده‌ها تغییر می‌کنند، callback فراخوانی شده و باعث یک رندر مجدد می‌شود.

مقدار بازگشتی:

این هوک تصویر لحظه‌ای فعلی داده‌ها را، همانطور که توسط تابع getSnapshot بازگردانده می‌شود، برمی‌گرداند.

چگونه experimental_useMutableSource کار می‌کند

experimental_useMutableSource با رهگیری تغییرات در یک منبع داده تغییرپذیر با استفاده از توابع getSnapshot و subscribe ارائه شده کار می‌کند. در اینجا یک تفکیک گام به گام آمده است:

1. رندر اولیه: هنگامی که کامپوننت در ابتدا رندر می‌شود، experimental_useMutableSource تابع getSnapshot را برای به دست آوردن یک تصویر لحظه‌ای اولیه از داده‌ها فراخوانی می‌کند.
2. اشتراک (Subscription): سپس هوک از تابع subscribe برای ثبت یک callback استفاده می‌کند که هر زمان داده‌های تغییرپذیر تغییر کنند، فراخوانی خواهد شد.
3. تشخیص تغییر: هنگامی که داده‌ها تغییر می‌کنند، callback فعال می‌شود. در داخل callback، ری‌اکت دوباره getSnapshot را برای به دست آوردن یک تصویر لحظه‌ای جدید فراخوانی می‌کند.
4. مقایسه: ری‌اکت تصویر لحظه‌ای جدید را با تصویر لحظه‌ای قبلی مقایسه می‌کند. اگر تصاویر لحظه‌ای متفاوت باشند (با استفاده از Object.is یا یک تابع مقایسه سفارشی)، ری‌اکت یک رندر مجدد برای کامپوننت را زمان‌بندی می‌کند.
5. رندر مجدد: در طول رندر مجدد، experimental_useMutableSource دوباره getSnapshot را برای به دست آوردن آخرین داده‌ها فراخوانی کرده و آن را به کامپوننت برمی‌گرداند.

مثال‌های کاربردی

بیایید استفاده از experimental_useMutableSource را با چند مثال عملی نشان دهیم.

مثال ۱: یکپارچه‌سازی با یک تایمر تغییرپذیر

فرض کنید یک شیء تایمر تغییرپذیر دارید که یک مُهر زمانی (timestamp) را به‌روز می‌کند. ما می‌توانیم از experimental_useMutableSource برای نمایش کارآمد زمان فعلی در یک کامپوننت ری‌اکت استفاده کنیم.

// پیاده‌سازی تایمر تغییرپذیر
class MutableTimer {
  constructor() {
    this._time = Date.now();
    this._listeners = [];
    this._intervalId = setInterval(() => {
      this._time = Date.now();
      this._listeners.forEach(listener => listener());
    }, 1000);
  }

  get time() {
    return this._time;
  }

  subscribe(listener) {
    this._listeners.push(listener);
    return () => {
      this._listeners = this._listeners.filter(l => l !== listener);
    };
  }
}

const timer = new MutableTimer();

// کامپوننت React
import React, { experimental_useMutableSource as useMutableSource } from 'react';

const mutableSource = {
  version: 0, // نسخه‌ای برای رهگیری تغییرات
  getSnapshot: () => timer.time,
  subscribe: timer.subscribe.bind(timer),
};

function CurrentTime() {
  const currentTime = useMutableSource(mutableSource, mutableSource.getSnapshot, mutableSource.subscribe);

  return (
    

      Current Time: {new Date(currentTime).toLocaleTimeString()}
    
  );
}

export default CurrentTime;

در این مثال، MutableTimer کلاسی است که زمان را به صورت تغییرپذیر به‌روز می‌کند. experimental_useMutableSource در تایمر مشترک می‌شود و کامپوننت CurrentTime فقط زمانی که زمان تغییر می‌کند دوباره رندر می‌شود. تابع getSnapshot زمان فعلی را برمی‌گرداند و تابع subscribe یک شنونده را برای رویدادهای تغییر تایمر ثبت می‌کند. ویژگی version در mutableSource، اگرچه در این مثال حداقلی استفاده نشده است، در سناریوهای پیچیده برای نشان دادن به‌روزرسانی‌های خود منبع داده (مانند تغییر بازه زمانی تایمر) بسیار مهم است.

مثال ۲: یکپارچه‌سازی با وضعیت تغییرپذیر یک بازی

یک بازی ساده را در نظر بگیرید که در آن وضعیت بازی (مانند موقعیت بازیکن، امتیاز) در یک شیء تغییرپذیر ذخیره می‌شود. experimental_useMutableSource می‌تواند برای به‌روزرسانی کارآمد UI بازی استفاده شود.

// وضعیت تغییرپذیر بازی
class GameState {
  constructor() {
    this.playerX = 0;
    this.playerY = 0;
    this.score = 0;
    this._listeners = [];
  }

  movePlayer(x, y) {
    this.playerX = x;
    this.playerY = y;
    this.notifyListeners();
  }

  increaseScore(amount) {
    this.score += amount;
    this.notifyListeners();
  }

  subscribe(listener) {
    this._listeners.push(listener);
    return () => {
      this._listeners = this._listeners.filter(l => l !== listener);
    };
  }

  notifyListeners() {
    this._listeners.forEach(listener => listener());
  }
}

const gameState = new GameState();

// کامپوننت React
import React, { experimental_useMutableSource as useMutableSource } from 'react';

const mutableSource = {
  version: 0, // نسخه‌ای برای رهگیری تغییرات
  getSnapshot: () => ({
    x: gameState.playerX,
    y: gameState.playerY,
    score: gameState.score,
  }),
  subscribe: gameState.subscribe.bind(gameState),
};

function GameUI() {
  const { x, y, score } = useMutableSource(mutableSource, mutableSource.getSnapshot, mutableSource.subscribe);

  return (
    

      Player Position: ({x}, {y})

      Score: {score}
       gameState.increaseScore(10)}>Increase Score
       gameState.movePlayer(x + 1, y + 1)}>Move Player
    
  );
}

export default GameUI;

در این مثال، GameState کلاسی است که وضعیت تغییرپذیر بازی را نگه می‌دارد. کامپوننت GameUI از experimental_useMutableSource برای اشتراک در تغییرات وضعیت بازی استفاده می‌کند. تابع getSnapshot یک تصویر لحظه‌ای از ویژگی‌های مربوطه وضعیت بازی را برمی‌گرداند. کامپوننت فقط زمانی که موقعیت بازیکن یا امتیاز تغییر می‌کند، دوباره رندر می‌شود و به‌روزرسانی‌های کارآمدی را تضمین می‌کند.

مثال ۳: داده‌های تغییرپذیر با توابع انتخابگر (Selector)

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

// داده تغییرپذیر
const mutableData = {
  name: "John Doe",
  age: 30,
  city: "New York",
  country: "USA",
  occupation: "Software Engineer",
  _listeners: [],

  subscribe(listener) {
    this._listeners.push(listener);
    return () => {
      this._listeners = this._listeners.filter(l => l !== listener);
    };
  },

  setName(newName) {
    this.name = newName;
    this._listeners.forEach(l => l());
  },

  setAge(newAge) {
    this.age = newAge;
    this._listeners.forEach(l => l());
  }

};


// کامپوننت React
import React, { experimental_useMutableSource as useMutableSource } from 'react';

const mutableSource = {
  version: 0, // نسخه‌ای برای رهگیری تغییرات
  getSnapshot: () => mutableData.age,
  subscribe: mutableData.subscribe.bind(mutableData),
};


function AgeDisplay() {
  const age = useMutableSource(mutableSource, mutableSource.getSnapshot, mutableSource.subscribe);

  return (
    

      Age: {age}
    
  );
}

export default AgeDisplay;

در این حالت، کامپوننت AgeDisplay فقط زمانی که ویژگی age از شیء mutableData تغییر می‌کند، دوباره رندر می‌شود. تابع getSnapshot به طور خاص ویژگی age را استخراج می‌کند و امکان تشخیص تغییرات دقیق را فراهم می‌آورد.

مزایای experimental_useMutableSource

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

معایب و ملاحظات

• پیچیدگی: کار با داده‌های تغییرپذیر و experimental_useMutableSource به کد شما پیچیدگی می‌افزاید. این کار نیازمند توجه دقیق به سازگاری و همگام‌سازی داده‌ها است.
• API آزمایشی: experimental_useMutableSource بخشی از ویژگی‌های آزمایشی حالت همزمانی ری‌اکت است، به این معنی که API آن در نسخه‌های آینده ممکن است تغییر کند.
• پتانسیل برای باگ‌ها: داده‌های تغییرپذیر در صورت عدم مدیریت دقیق می‌توانند باگ‌های نامحسوسی ایجاد کنند. اطمینان از اینکه تغییرات به درستی رهگیری شده و UI به طور مداوم به‌روز می‌شود، بسیار مهم است.
• مبادلات عملکردی: در حالی که experimental_useMutableSource می‌تواند عملکرد را در سناریوهای خاصی بهبود بخشد، به دلیل فرآیند ایجاد تصویر لحظه‌ای و مقایسه، سربار نیز ایجاد می‌کند. مهم است که برنامه خود را بنچمارک کنید تا مطمئن شوید که سود خالص عملکردی را ارائه می‌دهد.
• پایداری تصویر لحظه‌ای (Snapshot Stability): تابع getSnapshot باید یک تصویر لحظه‌ای پایدار برگرداند. از ایجاد اشیاء یا آرایه‌های جدید در هر فراخوانی getSnapshot خودداری کنید مگر اینکه داده‌ها واقعاً تغییر کرده باشند. این امر می‌تواند با memoize کردن تصویر لحظه‌ای یا مقایسه ویژگی‌های مربوطه در خود تابع getSnapshot به دست آید.

بهترین شیوه‌ها برای استفاده از experimental_useMutableSource

1. به حداقل رساندن داده‌های تغییرپذیر: هر زمان که ممکن است، ساختارهای داده تغییرناپذیر را ترجیح دهید. از experimental_useMutableSource فقط در مواقع ضروری برای یکپارچه‌سازی با منابع داده تغییرپذیر موجود یا برای بهینه‌سازی‌های عملکردی خاص استفاده کنید.
2. ایجاد تصاویر لحظه‌ای پایدار: اطمینان حاصل کنید که تابع getSnapshot یک تصویر لحظه‌ای پایدار برمی‌گرداند. از ایجاد اشیاء یا آرایه‌های جدید در هر فراخوانی خودداری کنید مگر اینکه داده‌ها واقعاً تغییر کرده باشند. از تکنیک‌های memoization یا توابع مقایسه برای بهینه‌سازی ایجاد تصویر لحظه‌ای استفاده کنید.
3. آزمایش کامل کد خود: داده‌های تغییرپذیر می‌توانند باگ‌های نامحسوسی ایجاد کنند. کد خود را به طور کامل آزمایش کنید تا مطمئن شوید که تغییرات به درستی رهگیری شده و UI به طور مداوم به‌روز می‌شود.
4. مستندسازی کد خود: استفاده از experimental_useMutableSource و فرضیات مربوط به منبع داده تغییرپذیر را به وضوح مستند کنید. این به سایر توسعه‌دهندگان کمک می‌کند تا کد شما را درک و نگهداری کنند.
5. در نظر گرفتن جایگزین‌ها: قبل از استفاده از experimental_useMutableSource، رویکردهای جایگزین مانند استفاده از یک کتابخانه مدیریت وضعیت (مانند Redux، Zustand) یا بازنویسی کد برای استفاده از ساختارهای داده تغییرناپذیر را در نظر بگیرید.
6. استفاده از نسخه‌بندی (Versioning): در داخل شیء mutableSource، یک ویژگی version قرار دهید. هر زمان که ساختار خود منبع داده تغییر کرد (مانند افزودن یا حذف ویژگی‌ها)، این ویژگی را به‌روز کنید. این به experimental_useMutableSource اجازه می‌دهد تا بداند چه زمانی باید استراتژی تصویر لحظه‌ای خود را به طور کامل بازبینی کند، نه فقط مقادیر داده‌ها را. هر زمان که نحوه کار منبع داده را به طور اساسی تغییر می‌دهید، نسخه را افزایش دهید.

یکپارچه‌سازی با کتابخانه‌های شخص ثالث

experimental_useMutableSource به ویژه برای یکپارچه‌سازی کامپوننت‌های ری‌اکت با کتابخانه‌های شخص ثالث که داده‌ها را به صورت تغییرپذیر مدیریت می‌کنند، مفید است. در اینجا یک رویکرد کلی ارائه شده است:

1. شناسایی منبع داده تغییرپذیر: مشخص کنید کدام بخش از API کتابخانه، داده‌های تغییرپذیری را که نیاز به دسترسی به آنها در کامپوننت ری‌اکت خود دارید، در معرض دید قرار می‌دهد.
2. ایجاد یک شیء منبع تغییرپذیر: یک شیء جاوااسکریپت ایجاد کنید که منبع داده تغییرپذیر را کپسوله کرده و توابع getSnapshot و subscribe را فراهم می‌کند.
3. پیاده‌سازی تابع getSnapshot: تابع getSnapshot را برای استخراج داده‌های مربوطه از منبع داده تغییرپذیر بنویسید. اطمینان حاصل کنید که تصویر لحظه‌ای پایدار است.
4. پیاده‌سازی تابع Subscribe: تابع subscribe را برای ثبت یک شنونده در سیستم رویداد کتابخانه بنویسید. شنونده باید هر زمان که داده‌های تغییرپذیر تغییر می‌کنند، فراخوانی شود.
5. استفاده از experimental_useMutableSource در کامپوننت خود: از experimental_useMutableSource برای اشتراک در منبع داده تغییرپذیر و دسترسی به داده‌ها در کامپوننت ری‌اکت خود استفاده کنید.

به عنوان مثال، اگر از یک کتابخانه نمودارسازی استفاده می‌کنید که داده‌های نمودار را به صورت تغییرپذیر به‌روز می‌کند، می‌توانید از experimental_useMutableSource برای اشتراک در تغییرات داده‌های نمودار و به‌روزرسانی متناسب کامپوننت نمودار استفاده کنید.

ملاحظات مربوط به حالت همزمانی (Concurrent Mode)

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

• پارگی (Tearing): پارگی زمانی رخ می‌دهد که ری‌اکت به دلیل وقفه‌ها در فرآیند رندرینگ، فقط بخشی از UI را به‌روز می‌کند. برای جلوگیری از پارگی، اطمینان حاصل کنید که تابع getSnapshot یک تصویر لحظه‌ای سازگار از داده‌ها را برمی‌گرداند.
• Suspense: Suspense به شما اجازه می‌دهد تا رندر یک کامپوننت را تا زمانی که داده‌های خاصی در دسترس قرار گیرند، به حالت تعلیق درآورید. هنگام استفاده از experimental_useMutableSource با Suspense، اطمینان حاصل کنید که منبع داده تغییرپذیر قبل از اینکه کامپوننت تلاش به رندر کند، در دسترس است.
• Transitions: Transitions به شما امکان می‌دهد تا به آرامی بین حالت‌های مختلف در برنامه خود جابجا شوید. هنگام استفاده از experimental_useMutableSource با Transitions، اطمینان حاصل کنید که منبع داده تغییرپذیر در طول انتقال به درستی به‌روز می‌شود.

جایگزین‌های experimental_useMutableSource

در حالی که experimental_useMutableSource مکانیزمی برای یکپارچه‌سازی با منابع داده تغییرپذیر فراهم می‌کند، همیشه بهترین راه‌حل نیست. جایگزین‌های زیر را در نظر بگیرید:

• ساختارهای داده تغییرناپذیر: در صورت امکان، کد خود را برای استفاده از ساختارهای داده تغییرناپذیر بازنویسی کنید. ساختارهای داده تغییرناپذیر رهگیری تغییرات و جلوگیری از تغییرات تصادفی را آسان‌تر می‌کنند.
• کتابخانه‌های مدیریت وضعیت: از یک کتابخانه مدیریت وضعیت مانند Redux، Zustand یا Recoil برای مدیریت وضعیت برنامه خود استفاده کنید. این کتابخانه‌ها یک مخزن متمرکز برای داده‌های شما فراهم می‌کنند و تغییرناپذیری را اعمال می‌کنند.
• Context API: Context API ری‌اکت به شما اجازه می‌دهد تا داده‌ها را بین کامپوننت‌ها بدون نیاز به prop drilling به اشتراک بگذارید. در حالی که خود Context API تغییرناپذیری را اعمال نمی‌کند، می‌توانید آن را در کنار ساختارهای داده تغییرناپذیر یا یک کتابخانه مدیریت وضعیت استفاده کنید.
• useSyncExternalStore: این هوک به شما امکان می‌دهد تا به منابع داده خارجی به روشی سازگار با حالت همزمانی و کامپوننت‌های سرور مشترک شوید. اگرچه به طور خاص برای داده‌های *تغییرپذیر* طراحی نشده است، اما اگر بتوانید به‌روزرسانی‌های مخزن خارجی را به روشی قابل پیش‌بینی مدیریت کنید، ممکن است جایگزین مناسبی باشد.

نتیجه‌گیری

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

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

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