الگوی انتخابگر React Context: بهینه‌سازی رندر مجدد برای عملکرد

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

درک مسئله: رندرهای مجدد غیرضروری

بیایید این موضوع را با یک مثال نشان دهیم. یک برنامه تجارت الکترونیکی را تصور کنید که اطلاعات کاربر (نام، ایمیل، کشور، تنظیمات برگزیده زبان، موارد سبد خرید) را در یک ارائه‌دهنده Context ذخیره می‌کند. اگر کاربر تنظیمات برگزیده زبان خود را به‌روزرسانی کند، همه کامپوننت‌هایی که از Context استفاده می‌کنند، از جمله آنهایی که فقط نام کاربر را نمایش می‌دهند، دوباره رندر می‌شوند. این ناکارآمد است و می‌تواند بر تجربه کاربر تأثیر بگذارد. کاربران را در مکان‌های جغرافیایی مختلف در نظر بگیرید. اگر یک کاربر آمریکایی نمایه خود را به‌روزرسانی کند، یک کامپوننت که جزئیات یک کاربر اروپایی را نمایش می‌دهد، نباید دوباره رندر شود.

چرا رندرهای مجدد مهم هستند

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

معرفی الگوی انتخابگر Context

الگوی انتخابگر Context مشکل رندرهای مجدد غیرضروری را با اجازه دادن به کامپوننت‌ها برای اشتراک فقط در بخش‌های خاصی از Context که نیاز دارند، برطرف می‌کند. این امر با استفاده از یک تابع انتخابگر که داده‌های مورد نیاز را از مقدار Context استخراج می‌کند، به دست می‌آید. هنگامی که مقدار Context تغییر می‌کند، React نتایج تابع انتخابگر را مقایسه می‌کند. اگر داده‌های انتخاب شده تغییر نکرده باشند (با استفاده از تساوی دقیق، ===)، کامپوننت دوباره رندر نخواهد شد.

نحوه کارکرد

تعریف Context: با استفاده از React.createContext() یک React Context ایجاد کنید.
ایجاد یک ارائه‌دهنده: برنامه خود یا بخش مربوطه را با یک ارائه‌دهنده Context بپیچید تا مقدار Context را در اختیار فرزندانش قرار دهید.
پیاده‌سازی انتخابگرها: توابع انتخابگر را تعریف کنید که داده‌های خاص را از مقدار Context استخراج می‌کنند. این توابع خالص هستند و فقط باید داده‌های ضروری را برگردانند.
استفاده از انتخابگر: از یک هوک سفارشی (یا یک کتابخانه) استفاده کنید که از useContext و تابع انتخابگر شما برای بازیابی داده‌های انتخاب شده و اشتراک فقط در تغییرات آن داده‌ها استفاده می‌کند.

پیاده‌سازی الگوی انتخابگر Context

چندین کتابخانه و پیاده‌سازی سفارشی می‌توانند الگوی انتخابگر Context را تسهیل کنند. بیایید یک رویکرد رایج را با استفاده از یک هوک سفارشی بررسی کنیم.

مثال: یک Context کاربر ساده

یک context کاربر را با ساختار زیر در نظر بگیرید:


const UserContext = React.createContext({
  name: 'John Doe',
  email: 'john.doe@example.com',
  country: 'USA',
  language: 'en',
  theme: 'light'
});

1. ایجاد Context


const UserContext = React.createContext({
  name: 'John Doe',
  email: 'john.doe@example.com',
  country: 'USA',
  language: 'en',
  theme: 'light'
});

2. ایجاد ارائه‌دهنده


const UserProvider = ({ children }) => {
  const [user, setUser] = React.useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
    country: 'USA',
    language: 'en',
    theme: 'light'
  });

  const updateUser = (updates) => {
    setUser(prevUser => ({ ...prevUser, ...updates }));
  };

  const value = React.useMemo(() => ({ user, updateUser }), [user]);

  return (
    
      {children}
    
  );
};

3. ایجاد یک هوک سفارشی با یک انتخابگر


import React from 'react';

function useUserContext() {
  const context = React.useContext(UserContext);
  if (!context) {
    throw new Error('useUserContext must be used within a UserProvider');
  }
  return context;
}

function useUserSelector(selector) {
  const context = useUserContext();
  const [selected, setSelected] = React.useState(() => selector(context.user));

  React.useEffect(() => {
    setSelected(selector(context.user)); // Initial selection
    const unsubscribe = context.updateUser;

    return () => {}; // No actual unsubscription needed in this simple example, see below for memoizing.
  }, [context.user, selector]);

  return selected;
}

نکته مهم: `useEffect` بالا فاقد یادداشت‌سازی مناسب است. وقتی `context.user` تغییر می‌کند، همیشه دوباره اجرا می‌شود، حتی اگر مقدار انتخاب شده یکسان باشد. برای یک انتخابگر قوی و یادداشت‌شده، به بخش بعدی یا کتابخانه‌هایی مانند `use-context-selector` مراجعه کنید.

4. استفاده از هوک انتخابگر در یک کامپوننت


function UserName() {
  const name = useUserSelector(user => user.name);

  return Name: {name};
}

function UserEmail() {
  const email = useUserSelector(user => user.email);

  return Email: {email};
}

function UserCountry() {
  const country = useUserSelector(user => user.country);

  return Country: {country};
}

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

یادداشت‌سازی انتخابگرها و مقادیر: ضروری برای بهینه‌سازی

برای اینکه الگوی انتخابگر Context واقعاً مؤثر باشد، یادداشت‌سازی بسیار مهم است. بدون آن، توابع انتخابگر ممکن است اشیاء یا آرایه‌های جدیدی را برگردانند، حتی اگر داده‌های زیربنایی از نظر معنایی تغییر نکرده باشند، که منجر به رندرهای مجدد غیرضروری می‌شود. به طور مشابه، اطمینان از اینکه مقدار ارائه‌دهنده نیز یادداشت‌سازی شده است، مهم است.

یادداشت‌سازی مقدار ارائه‌دهنده با `useMemo`

از هوک useMemo می‌توان برای یادداشت‌سازی مقداری که به UserContext.Provider ارسال می‌شود، استفاده کرد. این تضمین می‌کند که مقدار ارائه‌دهنده فقط زمانی تغییر می‌کند که وابستگی‌های زیربنایی تغییر کنند.


const UserProvider = ({ children }) => {
  const [user, setUser] = React.useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
    country: 'USA',
    language: 'en',
    theme: 'light'
  });

  const updateUser = (updates) => {
    setUser(prevUser => ({ ...prevUser, ...updates }));
  };

  // Memoize the value passed to the provider
  const value = React.useMemo(() => ({
    user,
    updateUser
  }), [user, updateUser]);

  return (
    
      {children}
    
  );
};

یادداشت‌سازی انتخابگرها با `useCallback`

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


function UserName() {
  // Memoize the selector function
  const nameSelector = React.useCallback(user => user.name, []);
  const name = useUserSelector(nameSelector);

  return Name: {name};
}

مقایسه عمیق و ساختارهای داده تغییرناپذیر

برای سناریوهای پیچیده‌تر، جایی که داده‌ها در Context به طور عمیق تودرتو هستند یا حاوی اشیاء قابل تغییر هستند، استفاده از ساختارهای داده تغییرناپذیر (به عنوان مثال، Immutable.js، Immer) یا پیاده‌سازی یک تابع مقایسه عمیق در انتخابگر خود را در نظر بگیرید. این تضمین می‌کند که تغییرات به درستی شناسایی می‌شوند، حتی زمانی که اشیاء زیربنایی در جای خود جهش یافته‌اند.

کتابخانه‌هایی برای الگوی انتخابگر Context

چندین کتابخانه راه حل‌های از پیش ساخته شده‌ای را برای پیاده‌سازی الگوی انتخابگر Context ارائه می‌دهند، که این فرآیند را ساده‌تر کرده و ویژگی‌های اضافی را ارائه می‌دهند.

use-context-selector

use-context-selector یک کتابخانه محبوب و به خوبی نگهداری شده است که به طور خاص برای این منظور طراحی شده است. این یک راه ساده و کارآمد برای انتخاب مقادیر خاص از یک Context و جلوگیری از رندرهای مجدد غیرضروری ارائه می‌دهد.

نصب:


npm install use-context-selector

طرز استفاده:


import { useContextSelector } from 'use-context-selector';

function UserName() {
  const name = useContextSelector(UserContext, user => user.name);

  return Name: {name};
}

Valtio

Valtio یک کتابخانه مدیریت وضعیت جامع‌تر است که از پراکسی‌ها برای به‌روزرسانی‌های کارآمد وضعیت و رندرهای مجدد انتخابی استفاده می‌کند. این یک رویکرد متفاوت برای مدیریت وضعیت ارائه می‌دهد، اما می‌تواند برای دستیابی به مزایای عملکرد مشابه با الگوی انتخابگر Context استفاده شود.

مزایای الگوی انتخابگر Context

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

چه زمانی از الگوی انتخابگر Context استفاده کنیم

الگوی انتخابگر Context به ویژه در سناریوهای زیر مفید است:

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

جایگزین‌های الگوی انتخابگر Context

در حالی که الگوی انتخابگر Context ابزاری قدرتمند است، اما تنها راه حل برای بهینه‌سازی رندرهای مجدد در React نیست. در اینجا چند رویکرد جایگزین وجود دارد:

Redux: Redux یک کتابخانه مدیریت وضعیت محبوب است که از یک فروشگاه واحد و به‌روزرسانی‌های قابل پیش‌بینی وضعیت استفاده می‌کند. این کنترل دقیق بر به‌روزرسانی‌های وضعیت ارائه می‌دهد و می‌تواند برای جلوگیری از رندرهای مجدد غیرضروری استفاده شود.
MobX: MobX یکی دیگر از کتابخانه‌های مدیریت وضعیت است که از داده‌های قابل مشاهده و ردیابی خودکار وابستگی استفاده می‌کند. این به طور خودکار کامپوننت‌ها را فقط زمانی دوباره رندر می‌کند که وابستگی‌های آنها تغییر کند.
Zustand: یک راه حل کوچک، سریع و مقیاس‌پذیر برای مدیریت وضعیت با استفاده از اصول ساده‌شده flux.
Recoil: Recoil یک کتابخانه مدیریت وضعیت تجربی از فیس‌بوک است که از اتم‌ها و انتخابگرها برای ارائه کنترل دقیق بر به‌روزرسانی‌های وضعیت و جلوگیری از رندرهای مجدد غیرضروری استفاده می‌کند.
ترکیب کامپوننت: در برخی موارد، می‌توانید با ارسال داده‌ها از طریق ویژگی‌های کامپوننت، از استفاده از وضعیت سراسری به طور کلی خودداری کنید. این می‌تواند عملکرد را بهبود بخشد و معماری برنامه شما را ساده کند.

ملاحظات برای برنامه‌های جهانی

هنگام توسعه برنامه‌ها برای مخاطبان جهانی، عوامل زیر را هنگام پیاده‌سازی الگوی انتخابگر Context در نظر بگیرید:

بین‌المللی‌سازی (i18n): اگر برنامه شما از چندین زبان پشتیبانی می‌کند، اطمینان حاصل کنید که Context شما تنظیمات برگزیده زبان کاربر را ذخیره می‌کند و کامپوننت‌های شما هنگام تغییر زبان دوباره رندر می‌شوند. با این حال، الگوی انتخابگر Context را برای جلوگیری از رندر مجدد غیرضروری سایر کامپوننت‌ها اعمال کنید. برای مثال، یک کامپوننت مبدل ارز ممکن است فقط زمانی نیاز به رندر مجدد داشته باشد که موقعیت مکانی کاربر تغییر کند و بر ارز پیش‌فرض تأثیر بگذارد.
بومی‌سازی (l10n): تفاوت‌های فرهنگی در قالب‌بندی داده‌ها (به عنوان مثال، قالب‌های تاریخ و زمان، قالب‌های اعداد) را در نظر بگیرید. از Context برای ذخیره تنظیمات بومی‌سازی استفاده کنید و اطمینان حاصل کنید که کامپوننت‌های شما داده‌ها را مطابق با محلی کاربر رندر می‌کنند. باز هم، الگوی انتخابگر را اعمال کنید.
مناطق زمانی: اگر برنامه شما اطلاعات حساس به زمان را نمایش می‌دهد، مناطق زمانی را به درستی مدیریت کنید. از Context برای ذخیره منطقه زمانی کاربر استفاده کنید و اطمینان حاصل کنید که کامپوننت‌های شما زمان‌ها را در زمان محلی کاربر نمایش می‌دهند.
دسترسی (a11y): اطمینان حاصل کنید که برنامه شما برای کاربرانی که دارای معلولیت هستند قابل دسترسی است. از Context برای ذخیره تنظیمات برگزیده دسترسی (به عنوان مثال، اندازه فونت، کنتراست رنگ) استفاده کنید و اطمینان حاصل کنید که کامپوننت‌های شما به این تنظیمات برگزیده احترام می‌گذارند.

نتیجه‌گیری

الگوی انتخابگر React Context یک تکنیک ارزشمند برای بهینه‌سازی رندرهای مجدد و بهبود عملکرد در برنامه‌های React است. با اجازه دادن به کامپوننت‌ها برای اشتراک فقط در بخش‌های خاصی از Context که نیاز دارند، می‌توانید به طور قابل توجهی رندرهای مجدد غیرضروری را کاهش داده و یک رابط کاربری پاسخگوتر و کارآمدتر ایجاد کنید. به یاد داشته باشید که انتخابگرها و مقادیر ارائه‌دهنده خود را برای حداکثر بهینه‌سازی یادداشت‌سازی کنید. کتابخانه‌هایی مانند use-context-selector را برای ساده‌سازی پیاده‌سازی در نظر بگیرید. با ساخت برنامه‌های پیچیده‌تر، درک و استفاده از تکنیک‌هایی مانند الگوی انتخابگر Context برای حفظ عملکرد و ارائه یک تجربه کاربری عالی، به ویژه برای مخاطبان جهانی، بسیار مهم خواهد بود.