سفر مبتدی به API زمینه React

سفر مبتدی به API زمینه React

Context API در React ابزار قدرتمندی است که به توسعه دهندگان کمک می کند تا وضعیت برنامه های React خود را مدیریت کنند. این روشی را برای جلوگیری از دردسر و ناامیدی ناشی از انتقال وسایل از اجزای والد به اجزای کودک عمیقا تو در تو فراهم می کند.

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

برداشتن حالت در React به فرآیند انتقال وضعیت یک مؤلفه به بالاتر در سلسله مراتب مؤلفه اشاره دارد که به چندین مؤلفه اجازه می دهد به آن حالت دسترسی پیدا کرده و آن را دستکاری کند. این شامل انتقال وضعیت و توابع به‌روزرسانی وضعیت مربوطه از طریق props از یک مؤلفه والد به مؤلفه‌های فرزند آن است.

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

راهنمای React Context و useContext() Hook

ایجاد زمینه

اولین قدم ایجاد زمینه است. این کار با ایجاد یک فایل جدید در پوشه src پروژه ما و دادن یک نام معنی دار مانند CounterContext.jsx انجام می شود. این فایل مسئول مدیریت حالت پیشخوان ما با استفاده از Context API خواهد بود.

در فایل CounterContext.jsx، باید React، useState و createContext را از کتابخانه React وارد کنیم. createContext یک تابع داخلی در React است که به ما کمک می‌کند وضعیت را با Context API ایجاد و مدیریت کنیم.

سپس می توانیم زمینه ایجاد شده را با استفاده از export const CounterContext = createContext(); صادر کنیم. این زمینه ای را ایجاد می کند که حالت متقابل ما را حفظ می کند.

در اینجا یک نمونه کد کد برای فایل CounterContext.jsx آمده است:

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

export const CounterContext = createContext();

ایجاد ارائه دهنده

در مرحله بعد، ما باید یک مؤلفه ارائه دهنده برای زمینه ایجاد کنیم. این مؤلفه ای است که حالت شمارنده را در معرض سایر مؤلفه های ما قرار می دهد.

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

در اینجا یک نمونه کد کد برای مؤلفه ارائه دهنده آورده شده است:

export const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  return (
    <CounterContext.Provider value={{ count, setCount }}>
      {children}
    </CounterContext.Provider>
  );
};

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

در نقطه ورود اصلی پروژه خود، خواه index.js یا App.jsx باشد، CounterProvider را از فایل CounterContext وارد کنید. مؤلفه App خود (یا مؤلفه ریشه برنامه خود) را با مؤلفه CounterProvider بپیچید.

در اینجا یک نمونه کد کد برای نقطه ورودی اصلی آورده شده است:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { CounterProvider } from './CounterContext';

ReactDOM.render(
  <CounterProvider>
    <App />
  </CounterProvider>,
  document.getElementById('root')
);

با استفاده از زمینه

اکنون که زمینه و ارائه دهنده را ایجاد کرده ایم، می توانیم از زمینه در سایر اجزای خود استفاده کنیم.

برای استفاده از متن، باید useContext را از React و CounterContext را از فایل CounterContext.jsx وارد کنیم. سپس می توانیم از useContext(CounterContext) برای دسترسی به حالت شمارنده و تابع به روز رسانی حالت استفاده کنیم.

در اینجا یک نمونه کد کد برای استفاده از زمینه در یک جزء آورده شده است:

import React, { useContext } from 'react';
import { CounterContext } from './CounterContext';

const CounterComponent = () => {
  const { count, setCount } = useContext(CounterContext);

  // Use the count state and setCount function as needed

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

نتیجه

خودشه! اکنون می‌توانیم حالت شمارنده را در مؤلفه خود با استفاده از رویکرد سنتی دستکاری کنیم، و همه چیز یکپارچه کار خواهد کرد.

امیدوارم این پست وبلاگ به شما در درک نحوه استفاده از Context API در React کمک کرده باشد. اگر سوالی دارید، لطفاً بپرسید.