مدیریت استیت با Context API در ری‌ اکت: راهنمای جامع

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

 

Context API چیست؟

Context API یکی از ابزارهای داخلی ری‌اکت است که در نسخه 16.3 معرفی شد. این ابزار به توسعه‌دهندگان اجازه می‌دهد تا داده‌ها را در سلسله‌مراتب کامپوننت‌ها (Component Tree) به اشتراک بگذارند، بدون اینکه نیاز باشد این داده‌ها از طریق props به تمام کامپوننت‌های میانی منتقل شوند. به عبارت دیگر، Context API مشکلی به نام prop drilling را حل می‌کند، جایی که props مجبور است از والدین به فرزندان متعدد عبور کند، حتی اگر فقط یکی از فرزندان نیاز به استفاده از آن داشته باشد.

هدف اصلی Context API

هدف اصلی Context API این است که روشی ساده و کارآمد برای اشتراک‌گذاری داده‌های سراسری ارائه دهد. این داده‌ها می‌توانند شامل مواردی مانند:

• اطلاعات کاربر (مانند نام، شناسه یا نقش)
• تنظیمات زبان و محلی‌سازی
• تم اپلیکیشن (روشن یا تاریک)
• داده‌های سراسری مثل وضعیت ورود کاربران یا سبد خرید

ساختار Context API

Context API شامل سه جزء اصلی است:

1. Context: یک شیء که با استفاده از React.createContext() ایجاد می‌شود. این شیء رابط اصلی برای اشتراک‌گذاری داده‌ها در کامپوننت‌ها است.
2. Provider: کامپوننتی که داده‌ها را فراهم می‌کند و به تمام فرزندان در درخت کامپوننت دسترسی می‌دهد.
3. Consumer: کامپوننت یا هوکی که داده‌های Context را دریافت می‌کند.

چرا از Context API استفاده کنیم؟ مزایای کانتکس

1. حذف Prop Drilling: نیازی به انتقال props از یک زنجیره طولانی از کامپوننت‌ها نیست.
2. پیاده‌سازی ساده: به راحتی می‌توان Context API را بدون نصب هیچ کتابخانه خارجی استفاده کرد.
3. یکپارچگی با React: چون Context API بخشی از خود ری‌ اکت است، هماهنگی کاملی با سایر ویژگی‌ها و ابزارهای ری‌ اکت دارد.
4. مدیریت داده‌های سراسری: برای داده‌هایی مثل اطلاعات کاربر، تم اپلیکیشن، یا تنظیمات زبان مناسب است.

با این حال، Context API برای مدیریت استیت‌های پیچیده مناسب نیست و ابزارهایی مانند Redux در چنین مواردی بهتر عمل می‌کنند.

استفاده اولیه از Context API

ایجاد یک Context ساده شامل سه مرحله است:

1. ایجاد Context
2. استفاده از Provider برای فراهم کردن داده‌ها
3. مصرف داده‌ها با استفاده از Consumer یا هوک useContext:

کاربرد Context API

Context API بیشتر برای داده‌هایی که بین چندین کامپوننت به اشتراک گذاشته می‌شوند، مناسب است. از جمله:

• تم‌ها: تغییر ظاهر برنامه (مثلاً روشن و تاریک).
• احراز هویت: ذخیره اطلاعات ورود کاربر.
• زبان و ترجمه‌ها: تنظیم زبان اپلیکیشن.
• حالت سراسری ساده: مدیریت تنظیمات یا داده‌های کوچک و غیر پیچیده.

نکات مهم درباره Context API

• ری‌ رندرهای غیرضروری و بهینه سازی: اگر Context داده‌های زیادی داشته باشد یا مکرراً به‌روزرسانی شود، می‌تواند باعث ری‌رندر غیرضروری کامپوننت‌های مصرف‌کننده شود. اگر داده‌های زیادی در Context دارید، استفاده از ابزارهایی مانند useMemo برای کاهش ری‌رندرها مفید است.
• تقسیم و تفکیک Context‌ها: اگر چندین نوع داده دارید، بهتر است از چند Context مختلف (در فایل های جداگانه) استفاده کنید (استفاده از ساختار ماژولار) تا از درگیری داده‌ها جلوگیری شود.
• محدودیت در پیچیدگی: Context API برای مدیریت داده‌های پیچیده مناسب نیست و برای چنین مواردی ابزارهایی مانند Redux ترجیح داده می‌شود.

 

مراحل و نحوه استفاده از Context API

برای استفاده از Context API در React، باید مراحل زیر را دنبال کنید. این مراحل به شما کمک می‌کنند تا داده‌های سراسری را ایجاد، ارائه و مصرف کنید.

1. ایجاد Context

در ابتدا باید یک Context ایجاد کنید. این کار با استفاده از متد React.createContext انجام می‌شود.

import { createContext } from "react";

// ایجاد Context
export const ThemeContext = createContext();

Context ایجادشده شیئی است که می‌تواند داده‌ها را در خود ذخیره کند و آن‌ها را برای مصرف‌کنندگان به اشتراک بگذارد. معمولاً این Context را در یک فایل جداگانه ایجاد و صادر می‌کنند.

2. استفاده از Provider برای ارائه داده‌ها

بعد از ایجاد Context، باید داده‌هایی که می‌خواهید به اشتراک بگذارید را با استفاده از Provider فراهم کنید. این Provider معمولاً به‌عنوان یک کامپوننت والد (Parent Component) عمل می‌کند که داده‌ها را به تمام فرزندان خود در درخت کامپوننت ارائه می‌دهد.

مثال:

import React, { useState } from "react";
import { ThemeContext } from "./ThemeContext";

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

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;

در این مثال:

• یک وضعیت (theme) و تابع به‌روزرسانی (setTheme) ایجاد می‌شود.
• این داده‌ها با استفاده از value به Context ارائه می‌شوند.
• children تمام کامپوننت‌های فرزندی را شامل می‌شود که باید به این داده‌ها دسترسی داشته باشند.

3. مصرف داده‌ها از Context

برای مصرف داده‌ها از Context، می‌توانید از دو روش استفاده کنید:

3.1. استفاده از هوک useContext

در کامپوننت‌های تابعی، هوک useContext راهی ساده و مستقیم برای دریافت داده‌ها از Context است.

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

const ThemeToggler = () => {
  const { theme, setTheme } = useContext(ThemeContext);

  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  return (
    <button onClick={toggleTheme}>
      {theme === "light" ? "Switch to Dark Mode" : "Switch to Light Mode"}
    </button>
  );
};

export default ThemeToggler;

در این مثال:

• داده‌های theme و setTheme مستقیماً از Context دریافت می‌شوند.
• کامپوننت بدون نیاز به prop drilling به داده‌ها دسترسی دارد.

3.2. استفاده از Consumer (مناسب برای کلاس‌ها)

در کامپوننت‌های کلاسی یا مواقعی که نمی‌توانید از هوک‌ها استفاده کنید، می‌توانید از کامپوننت Consumer برای دسترسی به داده‌های Context استفاده کنید.

import React from "react";
import { ThemeContext } from "./ThemeContext";

class ThemeToggler extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {({ theme, setTheme }) => (
          <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
            {theme === "light" ? "Switch to Dark Mode" : "Switch to Light Mode"}
          </button>
        )}
      </ThemeContext.Consumer>
    );
  }
}

export default ThemeToggler;

در این روش:

• Consumer به عنوان یک تابع رندر عمل می‌کند.
• داده‌های Context از طریق پارامترهای تابع رندر در دسترس هستند.

4. ادغام Context API در ساختار پروژه

برای اطمینان از دسترسی آسان به Context در کل پروژه، معمولاً Provider را در بالاترین سطح برنامه قرار می‌دهید، مثلاً در فایل App.js:

import React from "react";
import ThemeProvider from "./ThemeProvider";
import MyApp from "./MyApp";

const App = () => {
  return (
    <ThemeProvider>
      <MyApp />
    </ThemeProvider>
  );
};

export default App;

 

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

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

1. ایجاد فایل ThemeContext.js

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

import { createContext } from "react";

// ایجاد Context برای مدیریت تم
export const ThemeContext = createContext();

2. ایجاد یک Provider برای ارائه داده‌ها

برای ارائه داده‌های مربوط به تم، یک کامپوننت به نام ThemeProvider ایجاد می‌کنیم. این کامپوننت داده‌های تم و تابع تغییر تم را از طریق value در اختیار فرزندان قرار می‌دهد.

ThemeProvider.js

import React, { useState } from "react";
import { ThemeContext } from "./ThemeContext";

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

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

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;

در این کامپوننت:

• وضعیت theme مشخص می‌کند که حالت اپلیکیشن روشن یا تاریک است.
• تابع toggleTheme برای تغییر بین حالت‌های روشن و تاریک تعریف شده است.
• داده‌ها از طریق ThemeContext.Provider به فرزندان ارسال می‌شوند.

3. مصرف Context در کامپوننت‌های مختلف

3.1. ایجاد یک Header با استفاده از Context

در این مرحله، کامپوننتی به نام Header ایجاد می‌کنیم که تم فعلی را نمایش می‌دهد و امکان تغییر آن را فراهم می‌کند.

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

const Header = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <header
      style={{
        background: theme === "light" ? "#fff" : "#333",
        color: theme === "light" ? "#000" : "#fff",
        padding: "1rem",
        textAlign: "center",
      }}
    >
      <h1>{theme === "light" ? "Light Theme" : "Dark Theme"}</h1>
      <button onClick={toggleTheme}>
        {theme === "light" ? "Switch to Dark Mode" : "Switch to Light Mode"}
      </button>
    </header>
  );
};

export default Header;

در این کامپوننت:

• هوک useContext برای دسترسی به theme و toggleTheme استفاده شده است.
• استایل‌های داینامیک براساس تم فعلی تغییر می‌کنند.

3.2. مصرف Context در سایر بخش‌ها

می‌توانید Context را در هر بخشی از اپلیکیشن مصرف کنید. برای مثال، در یک کامپوننت اصلی:

import React from "react";
import Header from "./Header";

const MainApp = () => {
  return (
    <div>
      <Header />
      <p style={{ padding: "1rem" }}>
        This is a sample application demonstrating theme management using Context API.
      </p>
    </div>
  );
};

export default MainApp;

4. اتصال Provider به ریشه اپلیکیشن

برای اطمینان از دسترسی تمامی کامپوننت‌ها به Context، ThemeProvider را در بالاترین سطح برنامه قرار می‌دهیم:

App.js

import React from "react";
import ThemeProvider from "./ThemeProvider";
import MainApp from "./MainApp";

const App = () => {
  return (
    <ThemeProvider>
      <MainApp />
    </ThemeProvider>
  );
};

export default App;

5. اجرای پروژه و مشاهده عملکرد

در این اپلیکیشن، کاربر می‌تواند با کلیک روی دکمه موجود در Header، تم اپلیکیشن را بین حالت روشن و تاریک تغییر دهد. تمامی استایل‌ها به صورت داینامیک تغییر می‌کنند، و این تغییرات در هر بخشی از اپلیکیشن که به Context متصل باشد، اعمال می‌شود.

 

محدودیت‌ها و نکات پیشرفته Context API

محدودیت‌های Context API

استفاده از Context API، در کنار مزایای بسیاری که دارد، با چند محدودیت همراه است که در پروژه‌های بزرگ‌تر ممکن است مشکلاتی ایجاد کند:

1. ری‌ رندر غیرضروری

• یکی از بزرگ‌ترین چالش‌ها در Context API، ری‌رندر غیرضروری کامپوننت‌هایی است که به Context متصل شده‌اند. زمانی که مقدار value در Provider تغییر می‌کند، تمام کامپوننت‌هایی که از آن Context استفاده می‌کنند، حتی اگر تغییر مقدار برای آن‌ها بی‌اهمیت باشد، مجدداً رندر می‌شوند.
• راه‌حل: از تقسیم‌بندی Context‌ها و استفاده از هوک‌های پیشرفته مانند useMemo برای بهینه‌سازی مقدار value استفاده کنید.

const value = useMemo(() => ({ theme, toggleTheme }), [theme]);

2. مشکلات دیباگ کردن

• ردیابی Context‌ها در پروژه‌های پیچیده می‌تواند دشوار باشد، به ویژه زمانی که چندین Context در لایه‌های مختلف اپلیکیشن استفاده شده‌اند.
• راه‌حل: از ابزارهای توسعه‌دهنده React یا کتابخانه‌هایی مانند React DevTools استفاده کنید که قابلیت ردیابی Context را فراهم می‌کنند.

3. عدم امکان استفاده مجدد از منطق Context

• اگر منطق پیچیده‌ای برای Context وجود داشته باشد، استفاده مجدد از آن منطق در پروژه دشوار است.
• راه‌حل: ایجاد Custom Hooks می‌تواند کمک‌کننده باشد. این روش باعث می‌شود که بتوانید منطق Context را در یک هوک جداگانه مدیریت کنید.

const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }
  return context;
};

5. عدم پشتیبانی از چند Provider به صورت هم‌ زمان

• • Context API در مدیریت چندین Context که به طور موازی استفاده می‌شوند، پیچیدگی‌هایی دارد. هر Provider نیاز به مقدار جداگانه‌ای از داده دارد که ممکن است کدنویسی را پیچیده‌تر کند.
  • راه‌حل: استفاده از ابزارهایی مانند React-Redux یا Recoil در پروژه‌های بزرگ‌تر می‌تواند مناسب‌تر باشد.

نکات پیشرفته برای استفاده بهتر از Context API

1. تقسیم Context‌ها:

• به جای نگهداری تمام داده‌ها در یک Context، بهتر است Context‌های جداگانه‌ای برای وظایف مختلف مانند مدیریت زبان (Localization)، وضعیت کاربر (User State)، و تنظیمات تم (Theme Settings) ایجاد کنید. این کار باعث کاهش ری‌رندرها و افزایش خوانایی کد می‌شود.

2. ترکیب Context‌ها با Redux یا Zustand:

• در پروژه‌های بزرگ، ترکیب Context API با ابزارهای مدیریت وضعیت پیشرفته‌تر مانند Redux یا Zustand می‌تواند قدرت و انعطاف‌پذیری بیشتری ارائه دهد. به عنوان مثال، می‌توانید از Context برای نگهداری تنظیمات اپلیکیشن و از Redux برای مدیریت وضعیت پیچیده استفاده کنید.

3. Context خاص برای عملکردهای حساس به زمان:

• برای داده‌هایی که نیاز به بروزرسانی‌های سریع دارند (مانند تایمرها)، Context API ممکن است مناسب نباشد، زیرا باعث ری‌رندرهای مکرر می‌شود. در این موارد، استفاده از state‌های محلی یا ابزارهای مدیریت وضعیت پیشرفته‌تر مانند Zustand یا React Query توصیه می‌شود.

4. ترکیب Context با useReducer:

• برای مدیریت وضعیت‌های پیچیده‌تر، ترکیب Context API با useReducer می‌تواند گزینه مناسبی باشد. این کار به شما اجازه می‌دهد که مدیریت وضعیت را مشابه Redux انجام دهید اما با پیچیدگی کمتر.

const initialState = { theme: "light" };

const reducer = (state, action) => {
  switch (action.type) {
    case "TOGGLE_THEME":
      return { ...state, theme: state.theme === "light" ? "dark" : "light" };
    default:
      return state;
  }
};

const ThemeProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <ThemeContext.Provider value={{ state, dispatch }}>
      {children}
    </ThemeContext.Provider>
  );
};

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

 

مقایسه Context API با سایر ابزارهای مدیریت State در ری‌ اکت

Context API یکی از ابزارهای داخلی ری‌ اکت برای مدیریت وضعیت سراسری است، اما در کنار این ابزار، گزینه‌های دیگری نیز وجود دارند که هرکدام برای سناریوهای خاصی مناسب هستند. در این بخش، Context API را با سایر ابزارهای محبوب مدیریت State مقایسه می‌کنیم.

مقایسه ویژگی‌ها

ویژگی	Context API	Redux	MobX	Zustand
نوع مدیریت	ساده و درونی	وضعیت سراسری پیشرفته	وضعیت واکنش‌گرا	مدیریت وضعیت بدون Boilerplate
منحنی یادگیری	پایین	متوسط تا بالا	متوسط	پایین
وابستگی به کتابخانه خارجی	ندارد	بله	بله	بله
پشتیبانی از Async State	نیازمند پیاده‌سازی دستی	بومی (Middlewareها)	بومی	بومی
انعطاف‌پذیری در ساختار	محدود	بسیار بالا	بالا	متوسط
Performance	ممکن است با مشکل بازخوانی زیاد	بهینه با استفاده از Selectors	عالی با استفاده از Observables	بهینه و سبک
کاربرد اصلی	اشتراک‌گذاری داده‌های ساده	پروژه‌های بزرگ و پیچیده	مدیریت ساده و خودکار وضعیت	پروژه‌های متوسط و سبک

توضیحات بیشتر

1. Context API:
   • ساده‌ترین ابزار برای اشتراک‌گذاری داده‌هایی مانند تم‌ها یا اطلاعات کاربری.
   • برای پروژه‌های کوچک و متوسط ایده‌آل است.
   • ممکن است در پروژه‌های بزرگ به دلیل بازخوانی زیاد (Re-Rendering) با مشکل مواجه شود.
2. Redux:
   • مناسب برای پروژه‌های بزرگ و پیچیده با نیاز به ساختار بسیار منظم.
   • با استفاده از Middlewareهایی مثل Redux Thunk یا Redux Saga، مدیریت وضعیت Async آسان‌تر می‌شود.
   • اما پیچیدگی و نیاز به کدنویسی زیاد (Boilerplate) یکی از نقاط ضعف آن است.
3. MobX:
   • با رویکرد واکنش‌گرا (Reactive)، مدیریت وضعیت را بسیار ساده می‌کند.
   • مناسب برای پروژه‌هایی که نیازمند تغییرات سریع و خودکار وضعیت هستند.
   • انعطاف بیشتری نسبت به Redux دارد اما در پروژه‌های بسیار بزرگ کمتر رایج است.
4. Zustand:
   • یک ابزار بسیار سبک و مدرن برای مدیریت State.
   • نیاز به Boilerplate کمتری دارد و برای پروژه‌های متوسط و کوچک مناسب است.
   • از نظر سادگی شبیه Context API است اما مشکلات بازخوانی آن را ندارد.

نتیجه‌گیری در انتخاب ابزار

انتخاب ابزار مناسب برای مدیریت State به نیازهای پروژه و پیچیدگی آن بستگی دارد:

• Context API: ایده‌آل برای پروژه‌های کوچک و متوسط با نیازهای ساده.
• Redux: مناسب برای پروژه‌های بزرگ و تیم‌های بزرگ به دلیل ساختار منظم.
• MobX: گزینه‌ای مناسب برای پروژه‌های واکنش‌گرا با نیاز به تغییرات سریع.
• Zustand: انتخابی مدرن و ساده برای پروژه‌های متوسط و کوچک.

جمع بندی:

Context API یکی از ابزارهای داخلی و قدرتمند ری‌ اکت برای مدیریت وضعیت سراسری در اپلیکیشن‌های کوچک تا متوسط است. با استفاده از این ابزار، می‌توان داده‌هایی مثل تنظیمات تم یا اطلاعات کاربری را به‌راحتی بین کامپوننت‌ها به اشتراک گذاشت. هرچند این ابزار برای پروژه‌های ساده بسیار مناسب است، اما در پروژه‌های بزرگ‌تر ممکن است نیاز به استفاده از ابزارهای پیشرفته‌تری مانند Redux یا MobX باشد. درک مزایا و محدودیت‌های Context API به توسعه‌دهندگان کمک می‌کند تا ابزار مناسب را برای نیازهای پروژه خود انتخاب کنند و کدی بهینه‌تر و خواناتر بنویسند.

مطالعه بیشتر در رفرنس های خارجی:

createContext (react.dev)

Context (reactjs.org)