Context API
Context API در ری‌اکت (React) یک ابزار قدرتمند برای اشتراک‌گذاری داده‌ها و مدیریت وضعیت بین کامپوننت‌ها بدون نیاز به Prop Drilling است. این قابلیت به توسعه‌دهندگان اجازه می‌دهد تا داده‌ها و توابع مشترک مانند تنظیمات کاربر، تم‌ها یا داده‌های سراسری برنامه را به طور مؤثر بین بخش‌های مختلف برنامه توزیع کنند. در برنامه‌های مدرن وب و SPAها، که در آن‌ها ساختار کامپوننت‌ها پیچیده می‌شود، Context API برای جلوگیری از پیچیدگی و بهبود maintainability اهمیت ویژه‌ای دارد.
با استفاده از Context API، می‌توان یک مخزن داده مرکزی ایجاد کرد که تمامی کامپوننت‌های فرزند قادر به استفاده از آن باشند. این کار با استفاده از Provider/Consumer یا Hookهای مانند useContext انجام می‌شود. استفاده صحیح از Context باعث می‌شود که برنامه از Prop Drilling بی‌نیاز شود، عملکرد بهینه داشته باشد و مدیریت وضعیت به صورت modular انجام شود.
در این آموزش، شما با پیاده‌سازی Context API از پایه تا پیشرفته آشنا می‌شوید. یاد خواهید گرفت که چگونه داده‌های سراسری، وضعیت کاربر، و تم‌ها را مدیریت کنید، عملکرد برنامه را بهینه کنید و از رندرهای غیرضروری جلوگیری نمایید. این دانش به شما کمک می‌کند تا برنامه‌های ری‌اکت قابل توسعه، مقیاس‌پذیر و بهینه ایجاد کنید.
مثال پایه
jsximport React, { createContext, useState, useContext } from 'react';
// ایجاد Context تم
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
const ThemeSwitcher = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
return ( <div> <p>تم فعلی: {theme}</p> <button onClick={toggleTheme}>تغییر تم</button> </div>
);
};
const App = () => ( <ThemeProvider> <ThemeSwitcher /> </ThemeProvider>
);
export default App;در این مثال پایه، ابتدا با استفاده از createContext یک ThemeContext ایجاد شد. سپس ThemeProvider که شامل useState برای مدیریت وضعیت تم است، تعریف شد و تابع toggleTheme برای تغییر بین تم‌های 'light' و 'dark' ارائه شد. Provider مقادیر theme و toggleTheme را در اختیار تمام کامپوننت‌های فرزند قرار می‌دهد.
در کامپوننت ThemeSwitcher، از useContext برای دسترسی مستقیم به مقادیر Context استفاده شده است که موجب سادگی و خوانایی بیشتر کد می‌شود. این الگو از Prop Drilling جلوگیری کرده و مدیریت وضعیت را بهینه می‌کند. در پروژه‌های واقعی، این روش برای مدیریت تم، تنظیمات کاربر یا داده‌های سراسری کاربرد دارد.
مثال کاربردی
jsximport React, { createContext, useState, useContext, useEffect } from 'react';
// ایجاد Context کاربر
const UserContext = createContext();
const UserProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// شبیه‌سازی بارگذاری داده از API
setTimeout(() => {
setUser({ name: 'علی رضایی', role: 'Admin' });
setLoading(false);
}, 1500);
}, []);
const logout = () => setUser(null);
return (
<UserContext.Provider value={{ user, loading, logout }}>
{children}
</UserContext.Provider>
);
};
const UserProfile = () => {
const { user, loading, logout } = useContext(UserContext);
if (loading) return <p>در حال بارگذاری داده...</p>;
if (!user) return <p>هیچ کاربری وارد نشده است</p>;
return ( <div> <h2>خوش آمدید، {user.name}</h2> <p>نقش: {user.role}</p> <button onClick={logout}>خروج</button> </div>
);
};
const App = () => ( <UserProvider> <UserProfile /> </UserProvider>
);
export default App;در این مثال کاربردی، Context API برای مدیریت وضعیت کاربر و بارگذاری داده‌ها استفاده شده است. UserProvider با useEffect داده‌ها را به صورت غیرهمزمان شبیه‌سازی می‌کند و وضعیت user و loading را مدیریت می‌نماید. تابع logout برای بروزرسانی وضعیت از هر کامپوننت فرزند ارائه شده است.
کامپوننت UserProfile از useContext برای دسترسی به Context استفاده می‌کند و UI را بر اساس وضعیت Context بروزرسانی می‌کند. این طراحی وضعیت و UI را از هم جدا می‌کند و نگهداری و تست را آسان‌تر می‌سازد. همچنین تنها کامپوننت‌هایی که Context استفاده می‌کنند رندر می‌شوند، که باعث بهبود عملکرد برنامه می‌شود.
بهترین شیوه‌ها در استفاده از Context API شامل قرار دادن Provider در سطح مناسب، تقسیم Context برای جلوگیری از رندرهای غیرضروری و استفاده از setState یا useReducer برای به‌روزرسانی وضعیت است.
اشتباهات رایج شامل نگهداری وضعیت محلی در Context، تغییر مستقیم مقادیر Context و مدیریت نادرست به‌روزرسانی‌های غیرهمزمان است. برای debug کردن می‌توان از React DevTools استفاده کرد. بهینه‌سازی عملکرد شامل تقسیم Context، استفاده از React.memo و useMemo و کاهش به‌روزرسانی‌های Context است. از نظر امنیتی، اطلاعات حساس مانند توکن‌ها نباید مستقیماً در Context نگهداری شوند.
📊 جدول مرجع
| ری‌اکت (React) Element/Concept | Description | Usage Example |
|---|---|---|
| createContext | ایجاد یک Context برای اشتراک‌گذاری داده | const ThemeContext = createContext(); |
| Provider | مقادیر Context را در اختیار فرزندان قرار می‌دهد | <ThemeContext.Provider value={{ theme }}></ThemeContext.Provider> |
| useContext | Hook برای استفاده از مقادیر Context | const theme = useContext(ThemeContext); |
| useState | مدیریت وضعیت محلی در Provider | const [theme, setTheme] = useState('light'); |
| useEffect | مدیریت Lifecycle و افکت‌های جانبی | useEffect(() => { fetchData(); }, []); |
Context API یک روش کارآمد برای اشتراک‌گذاری وضعیت سراسری و جلوگیری از Prop Drilling است. نکات کلیدی شامل ایجاد Provider، استفاده از useContext، مدیریت داده‌های غیرهمزمان و بهینه‌سازی رندرها است.
برای ادامه، توسعه‌دهندگان می‌توانند با ابزارهای پیشرفته مدیریت وضعیت مانند Redux یا Zustand آشنا شوند تا تفاوت بین Context ساده و مدیریت کامل وضعیت را درک کنند. استفاده عملی از Context API باعث ایجاد برنامه‌های قابل مقیاس، بهینه و قابل نگهداری می‌شود.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود