استفاده از context در ری اکت

آیا تا به حال در پروژه‌های ری‌اکت خود با مشکل انتقال داده‌ها بین کامپوننت‌های مختلف مواجه شده‌اید؟ اگر بارها مجبور شده‌اید props را از لایه‌های بالایی به کامپوننت‌های عمیق‌تر در درخت رندر پاس دهید (مشکل معروف prop drilling)، یا به دنبال راهی ساده و کارآمد برای مدیریت حالت‌های اپلیکیشن خود هستید، context در ری اکت می‌تواند راه‌حل شما باشد! اگر شما هم به دنبال راهی برای بهبود ساختار کد خود و مدیریت بهتر وضعیت در پروژه‌های پیچیده‌تر ری‌اکت هستید، این مقاله از بلاگ آموزشگاه کندو دقیقاً برای شماست.

context در ری اکت چیست؟

Context یکی از ابزارهای داخلی ری‌اکت است که به شما امکان می‌دهد داده‌ها را به‌صورت جهانی (Global) در اپلیکیشن خود به اشتراک بگذارید، بدون نیاز به انتقال دستی props از لایه‌های بالایی به کامپوننت‌های پایین‌تر. این قابلیت بیشتر در پروژه‌هایی که نیاز به مدیریت حالت‌های مشترک (مثل تنظیمات کاربر، تم اپلیکیشن، یا داده‌های سراسری) دارند، بسیار کاربردی است.

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

Context با فراهم کردن امکان اشتراک‌گذاری داده‌های سراسری، مشکل Prop Drilling را حل می‌کند و در کنار ابزارهایی مانند هوک در ری اکت چیست، مدیریت حالت‌های پیچیده در اپلیکیشن‌های شما را بهینه‌تر و ساده‌تر می‌سازد.

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

استفاده از context در ری اکت مزایای زیادی دارد:

• حذف prop drilling: دیگر نیازی نیست داده‌ها را لایه‌به‌لایه منتقل کنید.
• مدیریت ساده‌تر حالت‌ها: برای داده‌های سراسری مثل تنظیمات کاربر یا زبان اپلیکیشن، Context یک راه‌حل تمیز ارائه می‌دهد.
• سبک و داخلی: برخلاف ابزارهای مدیریت حالت مثل Redux، نیازی به نصب پکیج اضافی ندارید.
• انعطاف‌پذیری با هوک‌ها: ترکیب Context با هوک‌هایی مثل useContext کدنویسی را سریع‌تر و خواناتر می‌کند.

برای مثال، در اپلیکیشن‌های بسیار پیچیده با به‌روزرسانی‌های مکرر، ممکن است نیاز به ابزارهای پیشرفته‌تر مثل Redux یا Zustand داشته باشید.

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

آموزش گام‌به‌گام استفاده از Context

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

ایجاد Context

ابتدا یک Context با استفاده از createContext می‌سازیم:

// ThemeContext.js

import { createContext } from ‘react’;

// ایجاد Context برای مدیریت تم

const ThemeContext = createContext();

export default ThemeContext;

فراهم کردن Context (Provider)

Provider داده‌ها را در دسترس کامپوننت‌های فرزند قرار می‌دهد. در فایل اصلی اپلیکیشن (مثل App.jsx)، Provider را تنظیم می‌کنیم:

function ThemeProvider({ children }) {

  const [theme, setTheme] = useState(‘light’);

  // تابع برای تغییر تم

  const toggleTheme = () => {

    setTheme((prevTheme) => (prevTheme === ‘light’ ? ‘dark’ : ‘light’));

  };

  // بهینه‌سازی با useMemo برای جلوگیری از رندر غیرضروری

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

  return (

    <ThemeContext.Provider value={contextValue}>

      {children}

    </ThemeContext.Provider>

  );

}

export default ThemeProvider;

 مصرف Context (Consumer)

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

استفاده می‌کنیم:

import { useContext } from ‘react’;

import ThemeContext from ‘./ThemeContext’;

function ThemeToggle() {

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

  return (

    <button onClick={toggleTheme}>

      تغییر به تم {theme === ‘light’ ? ‘تاریک’ : ‘روشن’}

    </button>

  );

}

export default ThemeToggle;

 استفاده در کامپوننت‌های دیگر

حالا می‌توانید در هر کامپوننت دیگر (مثل Content.jsx) به داده‌های Context دسترسی داشته باشید:

import { useContext } from ‘react’;

import ThemeContext from ‘./ThemeContext’;

function Content() {

  const { theme } = useContext(ThemeContext);

  return (

    <div>

      <h1>این یک اپلیکیشن با تم {theme === ‘light’ ? ‘روشن’ : ‘تاریک’} است!</h1>

    </div>

  );

}

export default Content;

مثال: فرض کنید یک اپلیکیشن فروشگاهی دارید که نیاز به نمایش سبد خرید در چندین کامپوننت دارد. با Context می‌توانید تعداد آیتم‌های سبد خرید را به‌صورت سراسری مدیریت کنید و هر کامپوننت بدون نیاز به props به آن دسترسی داشته باشد.

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

برای توسعه‌دهندگان حرفه‌ای، چند نکته برای بهینه‌سازی استفاده از Context وجود دارد:

جلوگیری از رندر غیرضروری: اگر داده‌های Context زیاد تغییر می‌کنند، از useMemo برای بهینه‌سازی استفاده کنید:

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

آیا می‌دانستید؟ می‌توانید چندین Context را در یک اپلیکیشن استفاده کنید. مثلاً یک Context برای تم و دیگری برای اطلاعات کاربر.

تقسیم Contextها: برای پروژه‌های بزرگ، به جای یک Context بزرگ، چندین Context برای داده‌های مختلف (مثل تم، کاربر، تنظیمات) بسازید.

ترکیب با Reducer: برای مدیریت حالت‌های پیچیده‌تر، می‌توانید Context را با useReducer ترکیب کنید.

ابزاری مانند Context در ری‌اکت به شما کمک می‌کند تا پیش از طی شدن مراحل کامل رندر فایلهای css و html توسط مرورگر، داده‌های مورد نیاز برای نمایش صحیح المان‌ها (مانند تم روشن/تاریک) را در سراسر کامپوننت‌های خود به آسانی مدیریت کنید.

مقایسه Context با سایر ابزارهای مدیریت حالت

Context جایگزین کاملی برای ابزارهایی مثل Redux یا Zustand نیست، اما در بسیاری از موارد می‌تواند نیازهای شما را برآورده کند. در جدول زیر، مقایسه‌ای سریع ارائه می‌دهیم:

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

محدودیت‌ها و بهترین روش‌ها

context در ری اکت بسیار قدرتمند است، اما باید با دقت استفاده شود:

محدودیت‌ها:

• برای به‌روزرسانی‌های مکرر و سنگین، ممکن است باعث رندر غیرضروری شود.
• برای پروژه‌های بسیار بزرگ، ممکن است مدیریت چندین Context پیچیده شود.

بهترین روش‌ها:

• Context را فقط برای داده‌های سراسری (مثل تم، تنظیمات کاربر) استفاده کنید.
• از Contextهای جداگانه برای موضوعات مختلف استفاده کنید.
• برای بهینه‌سازی عملکرد، از useMemo و React.memo کمک بگیرید.

نکته: برای پروژه‌های بزرگ، Contextهای جداگانه برای موضوعات مختلف (مثل تم، کاربر، تنظیمات) ایجاد کنید و از React.memo برای بهینه‌سازی کامپوننت‌ها استفاده کنید.

مثال عملی پیشرفته: مدیریت اطلاعات کاربر

بیایید یک مثال پیشرفته‌تر بررسی کنیم: مدیریت اطلاعات کاربر (مثل نام و وضعیت لاگین) با Context.

import { createContext, useContext, useState } from ‘react’;

const UserContext = createContext();

function UserProvider({ children }) {

  const [user, setUser] = useState({ name: ‘مهمان’, isLoggedIn: false });

  const login = (name) => setUser({ name, isLoggedIn: true });

  const logout = () => setUser({ name: ‘مهمان’, isLoggedIn: false });

  return (

    <UserContext.Provider value={{ user, login, logout }}>

      {children}

    </UserContext.Provider>

  );

}

function UserProfile() {

  const { user, logout } = useContext(UserContext);

  return (

    <div>

      <h2>خوش آمدید، {user.name}!</h2>

      {user.isLoggedIn && <button onClick={logout}>خروج</button>}

    </div>

  );

}

function App() {

  return (

    <UserProvider>

      <UserProfile />

    </UserProvider>

  );

}

export default App;

آیا می‌دانستید؟ Context API می‌تواند با ابزارهای تست مثل Jest به‌راحتی تست شود، اما باید مطمئن شوید که Provider در محیط تست mock شده باشد.

سخن آخر

context در ری اکت ابزاری ساده اما قدرتمند برای مدیریت حالت‌های سراسری در اپلیکیشن‌های شماست. با حذف prop drilling، کدنویسی تمیزتر و خواناتری خواهید داشت. چه در حال ساخت یک اپلیکیشن کوچک باشید و چه پروژه‌ای بزرگ، Context می‌تواند به شما کمک کند تا داده‌ها را به‌صورت کارآمد مدیریت کنید. فقط کافی است نکات بهینه‌سازی را رعایت کنید و از ترکیب آن با هوک‌ها و Reducer نهایت استفاده را ببرید.

02192004381می‌خواهید حرفه‌ای‌تر با ری‌اکت کار کنید و پروژه‌هایی جذاب بسازید؟ همین حالا با شماره 02192004381 تماس بگیرید و در دوره آموزشی پروژه‌محور ری‌اکت سایت کندو ثبت‌نام کنید! و یادگیری تخصصی را از دست ندهید!

سوالات متداول

در این قسمت به برخی از سوالات متداول شما درباره استفاده ازcontext در ری اکت پاسخ داده شده است.

Context در ری‌اکت چیست؟

Context API ابزاری در ری‌اکت است که امکان به اشتراک گذاشتن داده‌ها بین کامپوننت‌ها را بدون نیاز به prop drilling فراهم می‌کند.

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

وقتی نیاز به مدیریت داده‌های سراسری (مثل تم، تنظیمات کاربر، یا زبان) دارید، Context گزینه‌ای عالی است.

آیا Context جایگزین Redux است؟

خیر، Context برای پروژه‌های کوچک تا متوسط مناسب است، اما در اپلیکیشن‌های پیچیده با به‌روزرسانی‌های زیاد، Redux یا Zustand ممکن است بهتر باشند.

چگونه از رندر غیرضروری در Context جلوگیری کنیم؟

با استفاده از useMemo برای مقداردهی به Provider و React.memo برای کامپوننت‌ها می‌توانید عملکرد را بهینه کنید.