Context را در React در مراحل ساده بیاموزید

سلام برنامه نویسان، در این وبلاگ قصد داریم در مورد نحوه استفاده از متن در React برای انتقال داده بین کامپوننت ها بحث کنیم

ابتدا باید بفهمیم که چگونه می‌توانیم بدون استفاده از Context، داده‌ها را بین اجزای مختلف به اشتراک بگذاریم، می‌توانیم این کار را با استفاده از Props انجام دهیم و یاد می‌گیریم چه زمانی از Props و چه زمانی برای به اشتراک‌گذاری داده (وضعیت، توابع و غیره) از Context استفاده کنیم. .

فرض کنید ما یک حالت ساده در فایل App.jsx خود داریم که مسئول تغییر موضوع (اعم از تم تیره یا تم روشن) یک برنامه است بر اساس زمانی که کاربر روی دکمه ای که در نوار ناوبر برنامه ما است کلیک می کند، اکنون مشکل این است که وضعیت ما در App.jsx است و دکمه ای که وضعیت را تغییر می دهد در نوار ناوبر است چگونه می توانیم داده ها (در این مورد setState) را در نوار ناوبر دریافت کنیم تا با کلیک کاربر تم را تغییر دهیم، 2 راه حل برای این وجود دارد. مشکل یا می توانیم حالت را به Navbar منتقل کنیم یا می توانیم آن را با استفاده از props منتقل کنیم

می‌توانیم مرحله اول را نیز دنبال کنیم، اما فرض کنیم که می‌خواهیم وضعیت را فقط در فایل App.jsx نگه داریم.

ابتدا اجازه دهید کد App.jsx را ببینیم

import React,{useState} from 'react';
import Navbar from '../Navbar';
import MainSection from '../MainSection';
import Footer from '../Footer'

const App = () => {
    const [theme,setTheme] = useState(false);
    return(
        <div style={{backgroundColor : theme ? '#7f7f7f' : '#ffffff'}}>
        <Navbar setTheme={setTheme}/>
        <MainSection />
        <Footer />
        </div>
    )
} 

export default App

در این App.jsx ما تم حالت را با استفاده از useState تنظیم کرده ایم و مقدار پیش فرض آن را false قرار داده ایم و تابع setTheme را با استفاده از props به Navbar منتقل می کنیم.

حالا بیایید نوار Navbar را ببینیم که چگونه می توانیم از داده های ارسال شده در این مؤلفه برای تغییر موضوع استفاده کنیم وقتی کاربر روی دکمه کلیک می کند.

import React from 'react';

const Navbar = (props) => {
    return(
        <div>
            <ul>
            <li>Home</li>
            <li>About</li>
            <li>Services</li>        
            </ul>
        <button onClick={() => props.setTheme(prevTheme => !prevTheme)}>               </button>
         </div>
        )
}

بنابراین این یک راه ساده برای مدیریت وضعیت و ارسال داده با استفاده از props است

حال بیایید ببینیم چه زمانی می توانیم داده ها را با استفاده از props ارسال کنیم و چه زمانی نباید

فرض کنید وضعیتی در App.jsx وجود دارد و می‌خواهیم از آن در اولین فرزند والد اول استفاده کنیم، پس چگونه می‌توانیم این کار را انجام دهیم، باید داده‌ها را به شکل props به پدربزرگ و مادربزرگ و سپس والدین و سپس به ارسال کنیم. کودکی که در نهایت از آن استفاده می کند. اما این راه‌حل بهینه‌سازی یا راه‌حل خوبی برای یک برنامه React پیچیده‌تر نیست، زیرا مولفه‌های پدربزرگ و مادربزرگ از داده‌های ارسال شده استفاده نمی‌کنند، همچنان آن‌ها را از طریق props می‌پذیرند که هر بار که وضعیت این مشکل انتقال props بین اجزای مختلف را تغییر می‌دهد، ارائه می‌شود. حفاری پایه نامیده می شود.

اگر حالتی در پدربزرگ و مادربزرگ سوم داشته باشیم و بخواهیم از آن در فرزند پدربزرگ و مادربزرگ اول استفاده کنیم، چه اتفاقی می‌افتد، نمی‌توانیم آن را با استفاده از لوازم جانبی عبور دهیم، زیرا آنها از نظر سلسله مراتبی به یکدیگر مرتبط نیستند، در این مورد، کاری که می‌توانیم انجام دهیم این است که حالت را جابجا کنیم. به App.jsx و سپس آن را با استفاده از props به مؤلفه‌های محترمی که هر بار که از آن استفاده می‌کنیم نیازی به آنها نیست، ارسال کنید.

برای حل همه این مشکلات، React مفهوم Context را معرفی کرد

Context API یک ویژگی (نوعی) جدید است که در نسخه 16.3 React اضافه شده است که به فرد امکان می دهد وضعیت را در کل برنامه (یا بخشی از آن) به آرامی و به راحتی به اشتراک بگذارد.

React context API: چگونه کار می کند؟

ابتدا باید زمینه را با استفاده از React.createContext ایجاد کنیم. یک مصرف کننده و یک ارائه دهنده را برمی گرداند. ارائه دهنده مؤلفه ای است که همانطور که از نامش پیداست داده ها را در اختیار فرزندان خود قرار می دهد. مصرف کننده همانطور که اتفاق می افتد جزئی است که دولت را مصرف و استفاده می کند.

حالا بیایید نحوه استفاده از آن را درک کنیم.

import React, { createContext } from "react";
const UserContext = createContext();

const ContextProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");
  function toggleTheme(){
     setTheme(prevState => (prevState === "light" ? "dark" : "light"))
  }
  return (
    <UserContext.Provider value={{ theme,toggleTheme }}>
      {children}
    </UserContext.Provider>
  );
};

export {ContextProvider, UserContext};

در مثال بالا، ابتدا یک زمینه با استفاده از createContext ایجاد می کنیم و سپس مقداری را که باید به سایر اجزا در UserContext.Provider ارائه کنیم و کامپوننت Context و ContextProvider را صادر می کنیم.

لازم است کامپوننت main.JSX (در vite ) یا App.jsx را با ContextProvider بپیچید تا Context بتواند داده ها یا حالت ها را به اجزای دیگر منتقل کند.

import React from 'react';
import App from "./App"
import ReactDOM from "react-dom";
import {ContextProvider} from "./Context"

ReactDOM.render(
    <ContextProvider>
        <App />
    </ContextProvider>, 
    document.getElementById("root")
)

اکنون می‌توانیم داده‌ها را در هر مؤلفه‌ای با استفاده از useContext Hook مصرف کنیم

import React, {useContext} from "react"
import {UserContext} from "./Context"

function Header(props) {
    const {theme,toggleTheme} = useContext(UserContext) // we destructure it to get theme and toggleTheme passed using Context Provider in value 
    return (
        <header>
            <h2>{theme === "light" ? "Light": "Dark"} Theme</h2>
            <button onClick={toggleTheme}>Set Theme</button>
        </header>
    )    
}

export default Header

اکنون می‌توانیم داده‌ها را با استفاده از Context از تولیدکننده به مصرف‌کننده منتقل کنیم، حتی اگر به ترتیب سلسله مراتبی نباشند و مستقیماً از ارائه‌دهنده به مصرف‌کننده، مشکل حفاری Props را حل می‌کند و همچنین داده‌های ما را می‌توان تنها در یک محتوا به طور معمول در فایل متنی مدیریت کرد. این روش پاک‌تری برای حفظ کد و پیاده‌سازی DRY (خودت تکرار نکن) در کد ما ارائه می‌کند.

می توانید اطلاعات بیشتری در مورد زمینه در https://reactjs.org/docs/context.html بخوانید

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

لینک های رسانه های اجتماعی smlinks

من را در توییتر دنبال کنید، شناسه توییتر: ارسلان_0101