درک UseContext در React Native با TypeScript

امروز ، ما UseContext Hook را به روشی ساده و عملی کشف خواهیم کرد.

برای این مثال ، من یک برنامه بومی React را با دیگ بخار زیر شروع کردم ، مسیرهای پشته را تغییر دادم و دو صفحه ، صفحه اول و صفحه دوم ایجاد کردم. من همچنین پرونده رابط مسیر را به روز کردم تا همه چیز طبق آنچه باید کار کند.

https://github.com/allyssoncidade/boilerplate-expo-app

بیایید به تجارت برویم …

USEContext چیست و چرا مهم است!

تصور کنید که شما تیمی از رهبران را هماهنگ می کنید و دائماً نیاز به انتقال اطلاعات به رهبران و تیم های مربوطه دارند. در بعضی از مواقع ، این “تلفن بی سیم” قدیمی اتفاق می افتد: شما اطلاعات را به رهبری که به اعضای تیم خود منتقل می شود ، می دهید ، که به نوبه خود به دیگران منتقل می شوند. هرچه واسطه تر بین شما و کسانی که واقعاً به اطلاعات احتیاج دارند ، احتمال گم شدن یا تحریف پیام بیشتر می شود.

حال تصور کنید که به جای اینکه این اطلاعات را به صورت جداگانه به هر رهبر و عضو تیم منتقل کنید ، نوعی “اتاق جلسات” (یا یک کشو مشترک) دارید که در آن همه می توانند بدون بسته به واسطه ها ، مستقیماً به اطلاعات دسترسی پیدا کنند. این باعث می شود خطاهای ارتباطی از بین برود و همه چیز را کارآمدتر کند ، درست است؟ در React ، این “اتاق جلسات” Usecontext است.

با استفاده از useContext ، شما یک “زمینه” جهانی (این کشوی که قبلاً صحبت می کنیم) ایجاد می کنید که در آن می توانید اطلاعاتی را که توسط هر مؤلفه ، در هر نقطه از درخت مؤلفه قابل دسترسی است ، ذخیره کنید ، بدون اینکه مستقیماً از یک به دیگری منتقل شود. این ارتباط را ساده می کند و از سردرگمی “تلفن بی سیم” جلوگیری می کند.

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

من این را در عمل نشان خواهم داد تا همه چیز کاملاً واضح باشد.

**

وقت آن است که آن را در خمیر قرار دهید!

**
اول ، ما یک فایل زمینه ایجاد می کنیم تا بتوانیم انواع زمینه مورد نیاز را قرار دهیم. این همه چیز را سازمان یافته نگه می دارد و تعمیر و نگهداری و بازدیدهای آینده از کد را تسهیل می کند.

حال ، بیایید به پرونده زمینه برویم و اولین پرونده زمینه خود را ایجاد کنیم ، که ما آن را ** themeContext.jsx می نامیم.

import { createContext, useState } from 'react';
ما همچنین به طور مستقیم به عنوان یک نمونه CreateContext ، مانند این ، مستقیماً صادر خواهیم کرد (که زمینه ای را که ما ایجاد خواهیم کرد) ، مانند این:

export const ThemeContext = createContext();
به یاد داشته باشید که تقسیم به دو ارائه دهنده و زمینه مختلف پرونده نیز بسیار متداول است. در این حالت من در همان پرونده نگه می دارم زیرا چیز زیادی وجود نخواهد داشت.

ما همچنین بازگشت این عملکرد را در ارائه دهنده زمینه خود ایجاد خواهیم کرد و فرزندان را به عنوان یک استدلال می گذرانیم. این کودکان هر بخشی از برنامه هایی خواهند بود که از این زمینه استفاده می کنند (بیایید بعداً این اتفاق را ببینیم).

return {children};
عالی! اکنون پرونده خود را تقریباً آماده کرده ایم ، اما هنوز هم باید تعریف کنیم که واقعاً در این زمینه چه ارسال می شود ، درست است؟ بنابراین ، بیایید اکنون این کار را انجام دهیم.

بیایید از هوک استفاده کنیم تا دولت را مدیریت کنیم. برای این کار ، بیایید یک متغیر تم و یک اصلاح کننده SetTheme را در Usestate ایجاد کنیم و به عنوان یک مقدار اولیه ، بیایید “نور” را تعریف کنیم:

const [theme, setTheme] = useState('light')
سپس ما یک تابعی برای اصلاح این مقادیر ایجاد کردیم:

const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light')
}
و همچنین یک متغیر برای مدیریت ویژگی های زمینه:

const values = {
theme,
toggleTheme
}
سپس فقط این را به موضوع ما اضافه کنید:

return {children}
عالی! همه چیز در اینجا آماده است. کد ما باید اینگونه باشد:

`واردات {createContext ، Usestate} از” React “

صادرات const themecontext = createContext ()

صادرات const theMprovider = ({کودکان}) => {
محاصره کردن [theme, setTheme] = استفاده (“نور”)

const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light')
}

const values = {
    theme,
    toggleTheme
}

return {children}

} `

**

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

**
در این حالت همه چیز خواهد بود. ما می توانیم این کار را در پرونده app.jsx یا معادل آن انجام دهیم. نکته مهم این است که شامل همه چیزهایی است که شما می خواهید (فقط).

بنابراین بیایید به پرونده مسیر برویم. اول ، ما ارائه دهنده خود را وارد می کنیم:

import { ThemeProvider } from '../contexts/ThemeContext'
سپس او را در اطراف مسیرها قرار دادیم. در این مثال ، اینگونه خواهد بود:

const AppNavigation = () => {
return (


)
}
خیلی ساده ، درست است؟

**

اکنون ما فقط باید صفحه های خود را از این داده ها استفاده کنیم. بیایید به صفحه اول برویم و سپس روز دوشنبه تکرار کنیم.

**
ما UseContext و زمینه ای را که ایجاد می کنیم وارد خواهیم کرد:

import { useContext } from 'react'
import { ThemeContext } from '../../contexts/ThemeContext'
به یاد داشته باشید که برگشتیم ، ما غرفه هایی را که منتقل می شود ایجاد کردیم؟ خوب ، آنها در اینجا استفاده می شوند. بنابراین ما اکنون آن را صدا می کنیم ، و هرچه عملکردی را که موضوع را تغییر می دهد ، می گذرانیم ، ما این قدرت را داریم که نه تنها داده ها را دریافت کنیم بلکه برای تغییر مقداری که در متن است نیز تغییر می دهیم. بنابراین ، آنچه در یک مکان تغییر می کند نیز در دیگری خواهد بود.

بیایید با UsContext یک کنت ایجاد کنیم ، دقیقاً همانطور که با USSTATE (استاندارد قلاب در React) انجام می دهیم

const { theme, toggleTheme } = useContext(ThemeContext)
برای نشان دادن تغییر با وقوع ، من متنی را برای نمایش موضوع فعلی خود و همچنین یک دکمه برای تغییر موضوع با استفاده از TogggleTheme ما ایجاد می کنم.

بنابراین بازگشت صفحه نمایش صفحه اول (من یک رنگ را روی دکمه و فضایی بین آنها قرار داده ام تا مشاهده آن آسان شود):

return (

Tema atual: {theme}

onPress={() => navigation.navigate('SecondScreen')}
style={{ marginTop: 40, padding: 10, backgroundColor: 'gray', borderRadius: 5 }}
>
FirstScreen


onPress={() => toggleTheme()}
style={{ marginTop: 40, padding: 10, backgroundColor: 'tomato', borderRadius: 5 }}
>
Alterar Tema


)
_ اکنون فقط این کار را در صفحه دیگر انجام دهید که اقتباس ها را انجام می دهد!
_

خوب ، در اینجا ما قبلاً زمینه خود را به درستی کار می کنیم. حال برای خنک بودن ، بیایید یک رنگ پس زمینه اضافه کنیم تا واقعاً به نظر می رسد “موضوع” را تغییر می دهد؟

**

اجازه دهید کد!

**
برای این مثال ، ما قبل از بازگشت ، یک متغیر شیک را در عملکرد صفحه نمایش ایجاد خواهیم کرد.

سبکهای const = {
نور: {
پس زمینه کولور: “سفید”
} ،
تاریک: {
پس زمینه کولور: “سیاه”
}
} `
و در S.Wrapper ، بیایید سبکی را که مورد استفاده قرار می گیرد اضافه کنیم:

ما این کار را در هر دو صفحه تکرار می کنیم و با تغییر مطابق با متن ، رنگ پس زمینه خود را داریم.

همانطور که ما از TypeScript استفاده می کنیم ، بیایید فقط متغیر را بچرخانیم تا برنامه را بشکنیم. بنابراین ، در داخل هر صفحه ، ما این رابط را قرار می دهیم:

می توانید بین واردات و عملکرد صفحه نمایش خود قرار دهید.

interface ThemeContextType {
theme: 'light' | 'dark'
toggleTheme: () => void
}
سپس ما تماس متن را از این طریق تغییر می دهیم:

const { theme, toggleTheme } = useContext(ThemeContext) as ThemeContextType


**

همه چیز کار می کند و زمینه ما موفقیت آمیز بود!

**
………

**

پایان

**
در این مقاله ، ما UseContext Hook را به روشی عملی و ساده بررسی می کنیم ، و نشان می دهیم که چگونه می توان زمینه ای را برای مدیریت مضامین در یک برنامه بومی React ایجاد کرد. ما اهمیت USEContext را برای جلوگیری از پیچیدگی گذرگاه ها از طریق چندین مؤلفه ، ساده سازی ارتباطات و اطمینان از دسترسی همه مؤلفه ها به اطلاعات کارآمد آموخته ایم.

ما زمینه ای به نام themecontext ایجاد کردیم که به ما امکان می دهد تا موضوع برنامه (نور یا تاریک) را بین صفحه های مختلف به اشتراک بگذاریم. ما دیده ایم که چگونه می توان ارائه دهنده زمینه را پیکربندی کرد ، چگونه می توان این داده ها را روی صفحه ها مصرف کرد و در آخر نحوه اجرای تغییر مضامین به روشی پویا.

نکته قابل توجه این است که اگرچه UseContext یک راه حل قدرتمند برای مدیریت کشورهای جهانی است ، اما رویکردهای دیگری مانند Redux وجود دارد که به طور گسترده در برنامه های بزرگ در صفحه استفاده می شود. علاوه بر این ، هوک Usememo می تواند یک انتخاب عالی در موقعیت های خاص باشد که در آن لازم است با به خاطر سپردن مقادیر پیچیده یا محاسبات ، عملکرد را بهینه سازی کند.

_expeus که مفید و الهام بخش بوده است! احساس راحتی کنید که آزمایش کنید ، سازگار شوید و این اجرای را به جلو بیاورید. با تشکر از شما برای خواندن و آرزوی موفقیت زیادی در یادگیری خود!
_

شهر آلیسون

Desenvolvedor Mobile | جلو