۷ شهریور ۱۴۰۴فارسی

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

هوک useContext در React: تسلط بر مصرف Context و بهینه‌سازی عملکرد

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

درک Context API در React

قبل از پرداختن به useContext، بیایید مفاهیم اصلی Context API را به طور خلاصه مرور کنیم. Context API از سه بخش اصلی تشکیل شده است:

Context: محفظه‌ای برای داده‌های اشتراکی. شما با استفاده از React.createContext() یک کانتکست ایجاد می‌کنید.
Provider: کامپوننتی که مقدار کانتکست را برای فرزندان خود فراهم می‌کند. تمام کامپوننت‌هایی که درون provider قرار می‌گیرند می‌توانند به مقدار کانتکست دسترسی داشته باشند.
Consumer: کامپوننتی که در مقدار کانتکست مشترک می‌شود و هر زمان که مقدار کانتکست تغییر کند، دوباره رندر می‌شود. هوک useContext روش مدرن برای مصرف کانتکست در کامپوننت‌های تابعی است.

معرفی هوک useContext

هوک useContext یک هوک ری‌اکت است که به کامپوننت‌های تابعی اجازه می‌دهد تا در یک کانتکست مشترک شوند. این هوک یک شیء کانتکست (مقدار بازگشتی از React.createContext()) را می‌پذیرد و مقدار فعلی کانتکست را برای آن کانتکست برمی‌گرداند. هنگامی که مقدار کانتکست تغییر می‌کند، کامپوننت دوباره رندر می‌شود.

در اینجا یک مثال ساده آورده شده است:

مثال پایه

فرض کنید یک کانتکست برای تم (theme) دارید:


import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  const value = {
    theme,
    toggleTheme,
  };

  return (
    
      {children}
    
  );
}

function ThemedComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    
      Current Theme: {theme}
      
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

در این مثال:

ThemeContext با استفاده از React.createContext('light') ایجاد شده است. مقدار پیش‌فرض 'light' است.
ThemeProvider مقدار تم و یک تابع toggleTheme را برای فرزندان خود فراهم می‌کند.
ThemedComponent از useContext(ThemeContext) برای دسترسی به تم فعلی و تابع toggleTheme استفاده می‌کند.

مشکلات رایج و مسائل عملکردی

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

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

تکنیک‌های بهینه‌سازی عملکرد

برای کاهش این مشکلات عملکردی، تکنیک‌های بهینه‌سازی زیر را در نظر بگیرید:

۱. تقسیم کردن کانتکست (Context Splitting)

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

مثال:

به جای یک UserContext واحد که هم اطلاعات پروفایل کاربر و هم تنظیمات کاربر را در بر می‌گیرد، برای هر کدام کانتکست‌های جداگانه ایجاد کنید:


import React, { createContext, useContext, useState } from 'react';

const UserProfileContext = createContext(null);
const UserSettingsContext = createContext(null);

function UserProfileProvider({ children }) {
  const [profile, setProfile] = useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
  });

  const updateProfile = (newProfile) => {
    setProfile(newProfile);
  };

  const value = {
    profile,
    updateProfile,
  };

  return (
    
      {children}
    
  );
}

function UserSettingsProvider({ children }) {
  const [settings, setSettings] = useState({
    notificationsEnabled: true,
    theme: 'light',
  });

  const updateSettings = (newSettings) => {
    setSettings(newSettings);
  };

  const value = {
    settings,
    updateSettings,
  };

  return (
    
      {children}
    
  );
}

function ProfileComponent() {
  const { profile } = useContext(UserProfileContext);

  return (
    
      Name: {profile?.name}
      Email: {profile?.email}
    
  );
}

function SettingsComponent() {
  const { settings } = useContext(UserSettingsContext);

  return (
    
      Notifications: {settings?.notificationsEnabled ? 'Enabled' : 'Disabled'}
      Theme: {settings?.theme}
    
  );
}

function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

اکنون، تغییرات در پروفایل کاربر فقط کامپوننت‌هایی را که از UserProfileContext استفاده می‌کنند، دوباره رندر می‌کند و تغییرات در تنظیمات کاربر فقط کامپوننت‌هایی را که از UserSettingsContext استفاده می‌کنند، دوباره رندر می‌کند.

۲. مموایزیشن با React.memo

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

مثال:


import React, { useContext } from 'react';

const MyContext = React.createContext(null);

const MyComponent = React.memo(function MyComponent() {
  const { value } = useContext(MyContext);

  console.log('MyComponent rendered');

  return (
    
      Value: {value}
    
  );
});

export default MyComponent;

در این مثال، MyComponent فقط زمانی دوباره رندر می‌شود که value در MyContext تغییر کند.

۳. useMemo و useCallback

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

مثال:


import React, { createContext, useState, useMemo, useCallback, useContext } from 'react';

const MyContext = createContext(null);

function MyProvider({ children }) {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  const contextValue = useMemo(() => ({
    count,
    increment,
  }), [count, increment]);

  return (
    
      {children}
    
  );
}

function MyComponent() {
  const { count, increment } = useContext(MyContext);

  console.log('MyComponent rendered');

  return (
    
      Count: {count}
      
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

در این مثال:

useCallback تابع increment را مموایز می‌کند، و تضمین می‌کند که فقط زمانی که وابستگی‌هایش تغییر کنند (در این مورد، هیچ وابستگی ندارد، بنابراین برای همیشه مموایز می‌شود) تغییر می‌کند.
useMemo مقدار کانتکست را مموایز می‌کند، و تضمین می‌کند که فقط زمانی که count یا تابع increment تغییر کند، تغییر می‌کند.

۴. سلکتورها (Selectors)

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

مثال:


import React, { createContext, useContext } from 'react';

const MyContext = createContext(null);

const selectCount = (contextValue) => contextValue.count;

function MyComponent() {
  const contextValue = useContext(MyContext);
  const count = selectCount(contextValue);

  console.log('MyComponent rendered');

  return (
    
      Count: {count}
    
  );
}

export default MyComponent;

در حالی که این مثال ساده است، در سناریوهای واقعی، سلکتورها می‌توانند پیچیده‌تر و کارآمدتر باشند، به خصوص هنگام کار با مقادیر بزرگ کانتکست.

۵. ساختارهای داده‌ای تغییرناپذیر (Immutable Data Structures)

استفاده از ساختارهای داده‌ای تغییرناپذیر تضمین می‌کند که تغییرات در مقدار کانتکست به جای تغییر اشیاء موجود، اشیاء جدیدی ایجاد می‌کنند. این کار تشخیص تغییرات توسط React و بهینه‌سازی رندرها را آسان‌تر می‌کند. کتابخانه‌هایی مانند Immutable.js می‌توانند برای مدیریت ساختارهای داده‌ای تغییرناپذیر مفید باشند.

مثال:


import React, { createContext, useState, useMemo, useContext } from 'react';
import { Map } from 'immutable';

const MyContext = createContext(Map());

function MyProvider({ children }) {
  const [data, setData] = useState(Map({
    count: 0,
    name: 'Initial Name',
  }));

  const increment = () => {
    setData(prevData => prevData.set('count', prevData.get('count') + 1));
  };

  const updateName = (newName) => {
    setData(prevData => prevData.set('name', newName));
  };

  const contextValue = useMemo(() => ({
    data,
    increment,
    updateName,
  }), [data]);

  return (
    
      {children}
    
  );
}

function MyComponent() {
  const contextValue = useContext(MyContext);
  const count = contextValue.get('count');

  console.log('MyComponent rendered');

  return (
    
      Count: {count}
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

این مثال از Immutable.js برای مدیریت داده‌های کانتکست استفاده می‌کند، و تضمین می‌کند که هر به‌روزرسانی یک Map تغییرناپذیر جدید ایجاد می‌کند، که به React کمک می‌کند تا رندرها را به طور موثرتری بهینه‌سازی کند.

مثال‌های واقعی و موارد استفاده

Context API و useContext به طور گسترده در سناریوهای مختلف واقعی استفاده می‌شوند:

مدیریت تم: همانطور که در مثال قبلی نشان داده شد، مدیریت تم‌ها (حالت روشن/تاریک) در سراسر اپلیکیشن.
احراز هویت: فراهم کردن وضعیت احراز هویت کاربر و داده‌های کاربر برای کامپوننت‌هایی که به آن نیاز دارند. به عنوان مثال، یک کانتکست احراز هویت سراسری می‌تواند ورود، خروج و داده‌های پروفایل کاربر را مدیریت کند و آن را در سراسر اپلیکیشن بدون نیاز به prop drilling در دسترس قرار دهد.
تنظیمات زبان/منطقه: به اشتراک گذاشتن تنظیمات زبان یا منطقه فعلی در سراسر اپلیکیشن برای بین‌المللی‌سازی (i18n) و محلی‌سازی (l10n). این به کامپوننت‌ها اجازه می‌دهد تا محتوا را به زبان ترجیحی کاربر نمایش دهند.
پیکربندی سراسری: به اشتراک گذاشتن تنظیمات پیکربندی سراسری، مانند نقاط پایانی API یا پرچم‌های ویژگی (feature flags). این می‌تواند برای تنظیم پویای رفتار اپلیکیشن بر اساس تنظیمات پیکربندی استفاده شود.
سبد خرید: مدیریت وضعیت سبد خرید و فراهم کردن دسترسی به آیتم‌های سبد و عملیات مربوط به آن برای کامپوننت‌ها در سراسر یک اپلیکیشن تجارت الکترونیک.

مثال: بین‌المللی‌سازی (i18n)

بیایید یک مثال ساده از استفاده از Context API برای بین‌المللی‌سازی را نشان دهیم:


import React, { createContext, useState, useContext, useMemo } from 'react';

const LanguageContext = createContext({
  locale: 'en',
  messages: {},
});

const translations = {
  en: {
    greeting: 'Hello',
    description: 'Welcome to our website!',
  },
  fr: {
    greeting: 'Bonjour',
    description: 'Bienvenue sur notre site web !',
  },
  es: {
    greeting: 'Hola',
    description: '¡Bienvenido a nuestro sitio web!',
  },
};

function LanguageProvider({ children }) {
  const [locale, setLocale] = useState('en');

  const setLanguage = (newLocale) => {
    setLocale(newLocale);
  };

  const messages = useMemo(() => translations[locale] || translations['en'], [locale]);

  const contextValue = useMemo(() => ({
    locale,
    messages,
    setLanguage,
  }), [locale, messages]);

  return (
    
      {children}
    
  );
}

function Greeting() {
  const { messages } = useContext(LanguageContext);

  return (
    {messages.greeting}
  );
}

function Description() {
  const { messages } = useContext(LanguageContext);

  return (
    {messages.description}
  );
}

function LanguageSwitcher() {
  const { setLanguage } = useContext(LanguageContext);

  return (
    
      
      
      
    
  );
}

function App() {
  return (
    
      
      
      
    
  );
}

export default App;

در این مثال:

LanguageContext منطقه و پیام‌های فعلی را فراهم می‌کند.
LanguageProvider وضعیت منطقه را مدیریت می‌کند و مقدار کانتکست را فراهم می‌کند.
کامپوننت‌های Greeting و Description از کانتکست برای نمایش متن ترجمه شده استفاده می‌کنند.
کامپوننت LanguageSwitcher به کاربران اجازه می‌دهد تا زبان را تغییر دهند.

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

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

Redux: یک محفظه وضعیت قابل پیش‌بینی برای اپلیکیشن‌های جاوااسکریپت. Redux یک انتخاب محبوب برای مدیریت وضعیت پیچیده اپلیکیشن، به خصوص در اپلیکیشن‌های بزرگتر است.
MobX: یک راه‌حل مدیریت وضعیت ساده و مقیاس‌پذیر. MobX از داده‌های قابل مشاهده و واکنش‌پذیری خودکار برای مدیریت وضعیت استفاده می‌کند.
Recoil: یک کتابخانه مدیریت وضعیت برای React که از اتم‌ها و سلکتورها برای مدیریت وضعیت استفاده می‌کند. Recoil طوری طراحی شده است که دقیق‌تر و کارآمدتر از Redux یا MobX باشد.
Zustand: یک راه‌حل مدیریت وضعیت کوچک، سریع و مقیاس‌پذیر که از اصول ساده‌شده flux استفاده می‌کند.
Jotai: مدیریت وضعیت اولیه و انعطاف‌پذیر برای React با یک مدل اتمی.
Prop Drilling: در موارد ساده‌تر که درخت کامپوننت کم‌عمق است، prop drilling ممکن است یک گزینه مناسب باشد. این شامل پاس دادن props به پایین از طریق چندین سطح از درخت کامپوننت است.

انتخاب راه‌حل مدیریت وضعیت به نیازهای خاص اپلیکیشن شما بستگی دارد. هنگام تصمیم‌گیری، پیچیدگی اپلیکیشن، اندازه تیم و نیازمندی‌های عملکردی را در نظر بگیرید.

نتیجه‌گیری

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

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