Context API در ری اکت

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

Context API چیست؟

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

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

مزایا و معایب استفاده از Context API

در مورد هر کتابخانه برنامه‌نویسی مزایا و معایبی وجود دارد که Context API ری اکت نیز از این قاعده مستثنی نیست. قبل از اشاره به این مزایا و معایب بهتر است بدانید این قابلیت در محل‌هایی به کار می‌رود که به دنبال سادگی در طراحی هستید و برنامه‌تان هم پیچیدگی زیادی ندارد. 

مزایای Context API در ری اکت

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

ایجاد یک Context

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

برای شروع کار، یک برنامه ری‌اکت ایجاد کنید تا یک پروژه برای Context API تعریف کنیم. پس از ایجاد برنامه ری‌اکت، ساختاربندی پوشه‌ها در پروژه به صورت زیر است:

یک فایل با نام counterContext.jsx در فولدر counterContext ایجاد کنید. داخل این فایل می‌توانید محتویات زیر را قرار دهید:

import React, { createContext, useState } from 'react';
// ایجاد Context
const CounterContext = createContext();
// ایجاد Provider
const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return (
    <CounterContext.Provider value={{ count, increment, decrement }}
      {children}
    </CounterContext.Provider>
  );
};
export { CounterContext, CounterProvider };

در فایل counterComponent.jsx نیاز است تا کامپوننت اصلی که از context استفاده خواهد کرد، ایجاد شود. برای این کار می‌توانید دستورات زیر را در این فایل قرار دهید:

import React, { useContext } from 'react';
import { CounterContext } from '../counterContext/counterContext'
const CounterComponent = () => {
  const { count, increment, decrement } = useContext(CounterContext);
  return (
    <div style={{ textAlign: 'center', marginTop: '20px' }}>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increase</button>
      <button onClick={decrement}>Decrease</button>
    </div>
  );
};
export default CounterComponent;

در فایل App.js لازم است تا تغییراتی اعمال شوند تا کل اپلیکیشن قابلیت استفاده از Context ایجاد شده را داشته باشد:

import logo from './logo.svg';
import './App.css';
import { CounterProvider } from './components/counterContext/counterContext';
import CounterComponent from './components/contextComponent/counterComponent';
function App() {
  return (
    <CounterProvider>
      <CounterComponent />
    </CounterProvider>
  );
}
export default App;

اکنون تنها کافی است تا این برنامه ری‌اکت را اجرا کنید. خروجی زیر را در اختیار دارید که با کلیک کردن روی کلیدها می‌توانید عدد را کم و زیاد کنید. در این حالت، وضعیت Count با استفاده از Context API در ری اکت کنترل خواهد شد:

استفاده از Context در کامپوننت ها

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

در یک مثال دیگر، می‌توان رنگ باکس‌ها را با کلیک روی هر کلید تغییر داد. برای این کار یک Context دیگر ایجاد می‌کنیم تا از آن در یک کامپوننت دیگر استفاده کنیم. فایل colorContext.jsx به صورت زیر خواهد بود:

import React, { createContext, useState } from 'react';
// ایجاد Context
const ColorContext = createContext();
// ایجاد Provider
const ColorProvider = ({ children }) => {
  const [color, setColor] = useState('red');
  const changeColor = (newColor) => setColor(newColor);
  return (
    <ColorContext.Provider value={{ color, changeColor }}>
      {children}
    </ColorContext.Provider>
  );
};
export { ColorContext, ColorProvider };

فایل colorBoxComponent.jsx به صورت زیر است:

import React, { useContext } from 'react';
import { ColorContext } from '../colorContext/colorContext';
const ColorBoxComponent = () => {
  const { color, changeColor } = useContext(ColorContext);
  return (
    <div style={{ textAlign: 'center', marginTop: '20px' }}>
      <div style={{ width: '100px', height: '100px', backgroundColor: color, margin: 'auto' }}></div>
      <div style={{ marginTop: '20px' }}>
        <button onClick={() => changeColor('red')}>Red</button>
        <button onClick={() => changeColor('green')}>Green</button>
        <button onClick={() => changeColor('blue')}>Blue</button>
      </div>
    </div>
  );
};
export default ColorBoxComponent;

فایل App.js به صورت زیر خواهد بود:

import logo from './logo.svg';
import './App.css';
import { CounterProvider } from './components/counterContext/counterContext';
import CounterComponent from './components/contextComponent/counterComponent';
import ColorBoxComponent from './components/colorBoxComponent/colorBoxComponent';
import { ColorProvider } from './components/colorContext/colorContext';
function App() {
  return (
      <ColorProvider>
        <ColorBoxComponent />
      </ColorProvider>
  );
}
export default App;

با اجرای این برنامه ری‌اکت، خروجی را به صورت زیر در اختیار دارید:

استفاده از useContext Hook

پس از ایجاد Context API در ری اکت می‌توان از آن در کامپوننت‌های مختلف استفاده کرد. برای این کار تنها نیاز به هوک useContext است که به راحتی در تابع هر کامپوننت می‌توان آن را اضافه کرده و استفاده کرد. 

جالب است تا بدانید یکی از کاربردهای اساسی Context API تغییر تم برنامه ری‌اکت است. در مثال زیر می‌توانید این کاربرد را به صورت عملی مشاهده کنید. 

پس از ایجاد Context API در ری اکت می‌توان در دو کامپوننت جداگانه به دیتای وضعیت دسترسی پیدا کرده و تم را نیز تغییر داد. فایل themeContext.jsx به صورت زیر است:

import React, { createContext, useState } from 'react';
// ایجاد Context
const ThemeContext = createContext();
// تعریف Provider برای Context
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 { ThemeContext, ThemeProvider };

برای فایل themeSwitcher.jsx می‌توانید از دستورات زیر استفاده کنید:

import React, { useContext } from 'react';
import { ThemeContext } from '../../context/themeContext'
const ThemeSwitcher = () => {
  const { toggleTheme } = useContext(ThemeContext);
  const buttonStyle = {
    padding: '10px 20px',
    fontSize: '16px',
    cursor: 'pointer',
    margin: '10px',
  };
  return (
    <button style={buttonStyle} onClick={toggleTheme}>
      تغییر رنگ صفحه
    </button>
  );
};
export default ThemeSwitcher;

داخل فایل themeDisplay.jsx می‌توانید تغییرات زیر را ذخیره کنید:

import React, { useContext } from 'react';
import { ThemeContext } from '../../context/themeContext';
const ThemeDisplay = () => {
  const { theme } = useContext(ThemeContext);
  const containerStyle = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    backgroundColor: theme === 'light' ? '#ffffff' : '#333333',
    color: theme === 'light' ? '#000000' : '#ffffff',
    transition: 'background-color 0.3s ease',
  };
  return (
    <div style={containerStyle}>
      <p>تم فعلی: {theme}</p>
    </div>
  );
};
export default ThemeDisplay;

در نهایت تغییرات زیر را روی App.js اعمال کنید:

// App.js
import React from 'react';
import { ThemeProvider } from '../src/context/themeContext';
import ThemeSwitcher from '../src/components/themeSwitcher/themeSwitcher';
import ThemeDisplay from '../src/components/themeDisplay/themeDisplay';
const App = () => {
  return (
    <ThemeProvider>
      <div >
        <ThemeSwitcher />
        <ThemeDisplay />
      </div>
    </ThemeProvider>
  );
};
export default App;

با اجرای این برنامه ری‌اکت، خروجی را به صورت زیر در اختیار دارید:

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

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

• توابع و بخش‌های مختلف مربوط به Context را در فایل‌های جداگانه تعریف کرده و ذخیره کنید. 
• ایجاد یک Provider در بالاترین سطح اپلیکیشن نیاز است. در صورتی که این بخش را تعریف نکنید، مطمئنا Context API در ری اکت فعال نخواهد شد. 
• بهتر است در شرایطی که نیاز به Context API در ری اکت نیست از ایجاد آن جلوگیری کنید و از روش‌های ساده‌تر مانند useState و useReducer برای این کار استفاده کنید. 

مقایسه Context API با دیگر روش های مدیریت وضعیت

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

مدیریت وضعیت با Redux

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

مدیریت وضعیت با Zustand 

مزیت Zustand برای مدیریت وضعیت‌ها توسعه براساس TypeScript است. بنابراین، یک قدرت اضافی در اختیار شما است تا با استفاده از آن عملکرد برنامه خود را بهبود داده و شرایط را بهینه کنید. استفاده از Zustand کمتر از Redux است اما همچنان این کتابخانه را می‌توان یکی از بهترین گزینه‌ها برای مدیریت وضعیت‌ها در ری‌اکت به حساب آورد. 

مدیریت وضعیت با Recoil

ابزار Recoil یکی از کتابخانه‌های جدید نسبت به سایر رقبا است. این ابزار بهینه‌سازی بالایی دارد و سرعت عمل آن هم بسیار مناسب است. اگر قصد راه اندازی سریع یک State Manager برای ری‌اکت را دارید، Recoil یکی از گزینه‌های خوب است. 

اشتراک داده ها بین چندین کامپوننت

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

به عنوان یک مثال دیگر، یک کانتکست برای افزایش و کاهش یک عدد ایجاد می‌کنیم. ۲ کامپوننت جداگانه وجود دارند که برای Increase و Decrease عدد موردنظر به کار می‌روند. 

فایل counterContext.jsx به صورت زیر خواهد بود:

import React, { createContext, useState } from 'react';
// ایجاد Context
const CountContext = createContext();
// ایجاد Provider
const CountProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  const increase = () => setCount(count + 1);
  const decrease = () => setCount(count - 1);
  return (
    <CountContext.Provider value={{ count, increase, decrease }}>
      {children}
    </CountContext.Provider>
  );
};
export { CountContext, CountProvider };

فایل مربوط به افزایش عدد به صورت زیر است:

import React, { useContext } from 'react';
import { CountContext } from '../counterContext/counterContext';
const IncreaseComponent = () => {
  const { increase } = useContext(CountContext);
  return (
    <div style={{ textAlign: 'center', marginTop: '20px' }}>
      <button onClick={increase}>Increase</button>
    </div>
  );
};
export default IncreaseComponent;

فایل counterDecComponent.jsx به صورت زیر تعریف می‌شود:

import React, { useContext } from 'react';
import { CountContext } from '../counterContext/counterContext';
const DecreaseComponent = () => {
  const { decrease } = useContext(CountContext);
  return (
    <div style={{ textAlign: 'center', marginTop: '20px' }}>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
};
export default DecreaseComponent;

برای نمایش عدد از یک کامپوننت دیگر استفاده خواهد شد:

import React, { useContext } from 'react';
import { CountContext } from '../counterContext/counterContext';
const DisplayCount = () => {
  const { count } = useContext(CountContext);
  return (
    <div style={{ textAlign: 'center', marginTop: '20px' }}>
      <h1>Count: {count}</h1>
    </div>
  );
};
export default DisplayCount;

در نهایت نیاز است تا فایل App.js را نیز به صورت زیر تغییر دهیم:

// App.js
import React from 'react';
import { CountContext, CountProvider } from '../src/components/counterContext/counterContext';
import IncreaseComponent from '../src/components/counterIncComponent/counterIncComponent';
import DecreaseComponent from '../src/components/counterDecComponent/counterDecComponent';
import DisplayCount from './components/displayComponent/displayComponent';
const App = () => {
  return (
    <CountProvider>
        <IncreaseComponent />
        <DisplayCount />
        <DecreaseComponent />
    </CountProvider>
  );
};
export default App;

با اجرای این برنامه کاربرد مهم Context API در ری اکت را مشاهده خواهیم کرد. به این صورت، امکان دسترسی به وضعیت‌ عدد در کامپوننت‌های مختلف در اختیار شما قرار دارد:

جمع بندی 

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