مقدمه ای بر React Context API

یاد بگیرید که چگونه داده ها را در چندین مؤلفه به روش صحیح به اشتراک بگذارید.

React Context API یک ابزار مدیریت حالت است که برای به اشتراک گذاری داده ها در اجزای React استفاده می شود. نحوه استفاده از Context API برای پیگیری کاربران احراز هویت شده در اجزای عملکردی را بیاموزید.

React Context API چیست؟

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

به عنوان مثال، ممکن است بخواهید نام کاربری کاربر فعلی را از مؤلفه Login با سایر مؤلفه های برنامه خود به اشتراک بگذارید. Context با حذف نیاز به انتقال داده از طریق هر جزء در درخت مؤلفه، اشتراک‌گذاری نام کاربری را آسان‌تر می‌کند.

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

قبل از استفاده از React context، ابتدا نوع داده ای را که با آن کار می کنید در نظر بگیرید. زمینه بیشتر برای داده های استاتیک مناسب است. داده‌هایی که به‌طور مداوم تغییر می‌کنند باعث رندرهای بسیار زیاد و در نتیجه کاهش عملکرد می‌شوند. داده ها همچنین باید سراسری باشند یا حداقل توسط بسیاری از مؤلفه ها استفاده شود، به عنوان مثال، داده هایی مانند زبان کاربر، تم ها و تأیید اعتبار.

استفاده از زمینه برای پیگیری وضعیت احراز هویت کاربر

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

createContext()

برای شروع کار با Context API، ابتدا باید آن را با استفاده از این نحو ایجاد کنید.

const Context = React.createContext(defaultValue);

مقدار پیش فرض غیر ضروری است و معمولاً برای اهداف آزمایشی استفاده می شود.

ارائه دهنده

هر زمینه دارای یک ارائه دهنده است که مقدار مصرف شده توسط مؤلفه هایی را که بسته بندی می کند دریافت می کند. به این مؤلفه ها اجازه می دهد تا در تغییرات زمینه مشترک شوند.

<Context.Provider value={/* some value */}>

useContext

useContext() یک قلاب React است که به کامپوننت‌ها اجازه می‌دهد تا متن را مصرف کنند. شما فقط باید در زمینه عبور کنید.

const contextValue = useContext(Context)

حال بیایید زمینه احراز هویت را برای پیگیری وضعیت احراز هویت ایجاد کنیم.

با ایجاد یک فایل جدید به نام AuthContext.js شروع کنید و موارد زیر را اضافه کنید.

import { createContext } from "react";
const AuthContext = createContext();
export default AuthContext;

سپس، AuthProvider.js را ایجاد کرده و تابع ارائه دهنده را اضافه کنید.

import { useState, useEffect } from 'react';
import { getUser } from './auth.js'
import AuthContext from './AuthContext'
export const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    useEffect(() => {
 const currentUser = getUser()
 setUser(currentUser)
 }, []);
  
    return (
      <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
    );
  };

در اینجا، شما در حال بازیابی کاربر فعلی از یک تابع ()getUser جعلی هستید. در یک برنامه واقعی، این سرویس باطن شما خواهد بود.

کاربر را در وضعیت فعلی ذخیره کنید تا تغییرات را ردیابی کند و سپس کاربر را در قسمت ارزش پایه به ارائه دهنده ارسال کنید.

AuthProvider.js همچنین کودکان را با دسترسی به زمینه دریافت می کند.

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

یک فایل جدید useAuthContext.js ایجاد کنید و موارد زیر را اضافه کنید.

import AuthContext from "./AuthContext";
const useAuthContext.js = () => {
  const user = useContext(AuthContext);
  if (user === undefined) {
    throw new Error("useAuthContext can only be used inside AuthProvider");
  }
  return user;
};

اکنون اگر کدهای خارج از ارائه‌دهنده AuthContext را فراخوانی کند، برنامه شما این خطا را به خوبی مدیریت می‌کند.

مرحله آخر این است که اجزاء را با استفاده از متن با AuthProvider.js بپیچید.

import { AuthProvider } from "./AuthContext";
ReactDOM.render(
  <React.StrictMode>
 <AuthProvider>
 <App />
 </AuthProvider>
  </React.StrictMode>,
  rootElement
);

در اینجا مثالی از نحوه استفاده از زمینه برای محافظت از صفحه در برابر کاربران احراز هویت نشده است.

import useAuthContext from "./useAuthContext";
import { Navigate } from "react-router-dom";

const Profile = () => {
  const { user } = useAuthContext();
  if (!user) {
    return <Navigate replace to="/login" />;
  }
  return (
    <>
      <h1>Profile</h1>
    </>
  );
};

این جزء به صورت مشروط صفحه نمایه را بسته به وضعیت احراز هویت کاربر ارائه می دهد. بررسی می کند که آیا کاربر وجود دارد یا خیر، او را به صفحه ورود هدایت می کند. در غیر این صورت، صفحه نمایه را رندر می کند.

هنگامی که از React Context API استفاده نکنید

در این مقاله، نحوه استفاده از Context را برای پیگیری یک کاربر احراز هویت شده در کامپوننت ها یاد گرفتید. در حالی که ممکن است وسوسه شوید که از Context برای همه موارد استفاده به اشتراک گذاری داده خود استفاده کنید، نباید این کار را انجام دهید زیرا قابلیت نگهداری و عملکرد کد را کاهش می دهد. هر بار که مقدار متن تغییر می کند، هر مؤلفه ای که حالت را مصرف می کند، دوباره ارائه می شود. اگر داده ها فقط توسط چند مؤلفه استفاده می شود، props را انتخاب کنید.

منبع مقاله