🚀 روز سیزدهم: Context API در React 🚀

Summarize this content to 400 words in Persian Lang

غواصی در زمینه React: انتقال داده ها از مولفه های والدین به فرزند

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

React Context چیست؟

React Context یک ویژگی است که اجازه می دهد تا داده ها را در بین اجزاء بدون نیاز به عبور صریح از هر سطح از درخت مؤلفه به اشتراک بگذارند. این به ویژه زمانی مفید است که داده‌هایی دارید که چندین مؤلفه برای دسترسی به آنها نیاز دارند، مانند تم‌ها، اطلاعات کاربر یا تنظیمات زبان.

چرا زمینه مهم است

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

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

تنظیم زمینه: یک مثال عملی

برای اینکه واقعاً بفهمم Context چگونه کار می‌کند، تصمیم گرفتم آن را در یک پروژه ساده پیاده‌سازی کنم که در آن باید داده‌های موضوع (حالت روشن یا تاریک) را از یک مؤلفه والد به چندین مؤلفه فرزند منتقل کنم.

مرحله 1: ایجاد زمینه

ابتدا یک شی Context برای موضوع ایجاد کردم:

import { createContext } from “react”;

// Create a context with ‘light’ as the default value
const ThemeContext = createContext(“light”);

export default ThemeContext;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

مرحله 2: ارائه زمینه در مولفه والد

بعد، من یک مؤلفه والد را تنظیم کردم (App) برای ارائه ارزش موضوع به فرزندان خود:

import React, { useState } from “react”;
import ThemeContext from “./ThemeContext”;
import ThemedButton from “./ThemedButton”;

function App() {
const [theme, setTheme] = useState(“light”);

const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === “light” ? “dark” : “light”));
};

return (
ThemeContext.Provider value={theme}>
div>
h1>Current Theme: {theme}/h1>
button onClick={toggleTheme}>Toggle Theme/button>
ThemedButton />
/div>
/ThemeContext.Provider>
);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این جزء، ThemeContext.Provider بخشی از درخت کامپوننت را که نیاز به دسترسی به داده های موضوع دارد، می پیچد. با استفاده از value پایه بر روی Provider، می توانم داده هایی را که با مؤلفه های فرزند به اشتراک گذاشته می شود کنترل کنم.

مرحله 3: مصرف متن در یک جزء کودک

مرحله بعدی ایجاد یک جزء فرزند بود (ThemedButton) که داده های موضوع را مصرف می کند:

import React, { useContext } from “react”;
import ThemeContext from “./ThemeContext”;

function ThemedButton() {
const theme = useContext(ThemeContext);

return (
button style={{ backgroundColor: theme === “light” ? “#fff” : “#333”, color: theme === “light” ? “#000” : “#fff” }}>
I am a {theme} themed button
/button>
);
}

export default ThemedButton;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا، من استفاده کردم useContext قلاب برای دسترسی به مقدار موضوع فعلی به طور مستقیم در ThemedButton جزء این به من این امکان را داد که به صورت پویا دکمه را بر اساس اینکه موضوع روی “روشن” یا “تاریک” تنظیم شده است، استایل کنم.

مرحله 4: همه چیز را کنار هم بگذارید

در نهایت، پیاده سازی را با اجرای برنامه آزمایش کردم. را App مؤلفه موضوع را کنترل می کند و ThemedButton مولفه ظاهر خود را بر این اساس تغییر می دهد. دکمه جابجایی به من اجازه می دهد بین تم های روشن و تاریک به طور یکپارچه جابجا شوم.

خوراکی های کلیدی

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

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

در ادامه سفر React خود، مشتاقم که به ساختن این دانش ادامه دهم. در مرحله بعد، من مشتاقانه منتظر کاوش در مفاهیم پیشرفته تر هستم و ببینم چگونه می توان Context را در برنامه های بزرگتر و پیچیده تر اعمال کرد.به سمت ماجراهای بیشتر React!

منتظر به‌روزرسانی‌های بیشتر باشید و با خیال راحت پیشرفت من را در GitHub و LinkedIn دنبال کنید

تصویر روی جلد توسط Lautaro Andreani در Unsplash

import { createContext } from "react";

// Create a context with 'light' as the default value
const ThemeContext = createContext("light");

export default ThemeContext;

import React, { useState } from "react";
import ThemeContext from "./ThemeContext";
import ThemedButton from "./ThemedButton";

function App() {
    const [theme, setTheme] = useState("light");

    const toggleTheme = () => {
        setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
    };

    return (
        ThemeContext.Provider value={theme}>
            div>
                h1>Current Theme: {theme}/h1>
                button onClick={toggleTheme}>Toggle Theme/button>
                ThemedButton />
            /div>
        /ThemeContext.Provider>
    );
}

export default App;

import React, { useContext } from "react";
import ThemeContext from "./ThemeContext";

function ThemedButton() {
    const theme = useContext(ThemeContext);

    return (
        button style={{ backgroundColor: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#000" : "#fff" }}>
            I am a {theme} themed button
        /button>
    );
}

export default ThemedButton;