context react

سلام امروز اومدم با یه پست جدید

در این مقاله قصد دارم راجب context react کمی توضیح بدم:)

در ریکت معمولا داده ها از طریق props ها از پدر به فرزند ها منقل میشن. اما فرص کنیم کلی دیتا داریم ک اگر بخواهیم از props ها استفاده کنیم کلی دشوار میشه و کد نویسی کثیف از نظر من:)

پس اینجا context ها منبعی هستن برای نوشتن state های سراسری

که بالاترین لایه تعریف میشوند و فرزندها به اون state ها دسترسی دارن.

1. خب بریم سراغ context.provider : یک prop به نام value را می‌پذیرد که در واقع مقدار رو میگیره برامون نگه میداره. یعنی برای بروزرسانی داده هامون از این قابلیت استفاده میکنیم.
2. در context.consumer : مقدار داده رو بهمون برمیگردونه ولی امکان بروزرسانی داده یا تغییرآن رو نداریم

در اینجا میخواهم custom theme را با context پیاده سازی کنم:

import React, { createContext, useState } from &quotreact&quot
const ThemeColors = {
primary: &quotbrown&quot,
dark: &quot#000&quot,
light: &quot#fff&quot,
};

ابتدا یه ابجکتی از رنگ هایی که قرار است استفاده کنم میسازم.

که در اینجا فقط از دو کلید dark و light استفاده کردم

1. در اینجا context رو میسازم با createContext که مقدار default بهش یه رنگ پیش فرض میدهم و یه تابع برای عوض کردن رنگ
   

import React, { createContext, useState } from &quotreact&quot

const ThemeColors = {
primary: &quotbrown&quot,
dark: &quot#000&quot,
light: &quot#fff&quot,
};
export const ThemeColorContext = createContext({
color: ThemeColors.dark,
changeColor: (color) => {},
});

خب بریم سراغ ساخت wrapper مون که توش یه state با مقدار default و یه تابع برای عوض کردن رنگ نوشته شده و سپس تو خروجیمون context که ساخته شده با provider و value که داده شده مینویسم.

export function ThemeColorWrapper({ children }) {
const [color, setColor] = useState(ThemeColors.dark);
function changeColor(color) {
setColor(color);
}
return (
<ThemeColorContext.Provider value={{ color: color, changeColor: changeColor }}>
{children}
</ThemeColorContext.Provider>

حال ThemeColorWrapper یه لایه کانتکس شده که هرجایی ک بخواهیم استفاده کنیم تو لایه های بالاتر میپیچیمش تا children ها به مقدارا دسترسی داشته باشن.

حال هر کامپوننتی که تو Main باشه به context دسترسی دارن.

return (
<ThemeColorContext>
<Main />
<ThemeColorContext/>
);

سپس تو کامپوننت های پایین تر وقتی که قراره استفاده بشه از context به این روش از هوک خود ریکت useContext و ورودی بهش همون context ساخته شده داده میشود

import React,{useContext) from &quotreact&quot

const Dashboard = () => {
const dataColor = useContext(ThemeColorContext);
}

سپس یه دکمه گذاشتم برای تغغیر رنگ که با رویداد کلیک تابع changeColor که در context ساخته شده رو فراخوانی میکند و چیزی که برمیگردونه رو تاثیرش رو همه ی کامپوننت های children میباشد.

<button ={() => changeColor(&quotdark&quot)}>dark</button>;
<nav style={{background:color}}>welcome</nav>

خب اینم از آموزش امروز امیدوارم که براتون مفید باشه. اگ چیزی از قلم انداختم خوشحال میشم نظرتون رو تو کامنت برام بنویسید.