Реацт Цонтект АПИ је алатка за управљање стањем која се користи за дељење података између Реацт компоненти. Сазнајте како да користите Цонтект АПИ за праћење проверених корисника у функционалним компонентама.

Шта је Реацт Цонтект АПИ?

Реацт је библиотека заснована на компонентама. Његове примене обухватају различите компоненте који раде заједно. У неким случајевима, ваша апликација треба да дели податке између ових компоненти.

На пример, можда бисте желели да поделите корисничко име тренутног корисника из Пријавите се компоненту другим компонентама у вашој апликацији. Контекст олакшава дељење корисничког имена тако што елиминише потребу за пропуштањем података кроз сваку компоненту у стаблу компоненти.

Када треба да користите Реацт Цонтект АПИ?

Пре употребе Реацт контекста, прво размотрите врсту података са којима радите. Контекст је погоднији за статичне податке. Подаци који се стално мењају проузроковаће превише поновних рендеровања и као резултат тога, смањити перформансе. Подаци такође треба да буду глобални или да их бар користе многе компоненте, на пример, подаци као што су кориснички језик, теме и аутентификација.

Коришћење контекста за праћење статуса аутентификације корисника

Ако ваша апликација користи аутентификацију, многе њене компоненте ће морати да знају тренутно стање аутентификације корисника. Преношење статуса аутентикације на сваку компоненту је сувишно и доводи до бушења подупирача, тако да је коришћење контекста добра опција.

цреатеЦонтект()

Да бисте започели са Цонтект АПИ-јем, прво морате да га креирате користећи ову синтаксу.

цонст Цонтект = Реацт.цреатеЦонтект (дефаултВалуе);

Подразумевана вредност је непотребна и обично се користи у сврхе тестирања.

Провајдер

Сваки контекст има добављача који прима вредност коју конзумирају компоненте које обмотава. Омогућава овим компонентама да се претплате на промене контекста.

усеЦонтект

усеЦонтект() је Реаговати кука што омогућава компонентама да конзумирају контекст. Потребно је само да прођете у контексту.

цонст цонтектВалуе = усеЦонтект (контекст)

Хајде сада да креирамо контекст аутентификације да бисмо пратили стање аутентификације.

Почните тако што ћете креирати нову датотеку, АутхЦонтект.јс, и додати следеће.

импорт { цреатеЦонтект } из "реацт";
цонст АутхЦонтект = цреатеЦонтект();
извоз подразумевани АутхЦонтект;

Затим креирајте АутхПровидер.јс и додајте функцију провајдера.

импорт { усеСтате, усеЕффецт } из 'реацт';
импорт { гетУсер } из './аутх.јс'
увези АутхЦонтект из './АутхЦонтект'
екпорт цонст АутхПровидер = ({ деца }) => {
 цонст [усер, сетУсер] = усеСтате (нулл);
 усеЕффецт(() => {
 цонст цуррентУсер = гетУсер()
 сетУсер (цуррентУсер)
 }, []);
повратак (
{деца}
 );
 };

Овде преузимате тренутног корисника са лажног гетУсер() функција. У правој апликацији, ово би била ваша позадинска услуга.

Сачувајте корисника у тренутном стању да бисте пратили све промене, а затим проследите корисника добављачу у вредности проп.

АутхПровидер.јс такође прима децу са приступом контексту.

Следећи корак је креирање прилагођене куке која ће омогућити компонентама омотаним са провајдером да приступе контексту.

Креирајте нову датотеку усеАутхЦонтект.јс и додати следеће.

импорт АутхЦонтект из "./АутхЦонтект";
цонст усеАутхЦонтект.јс = () => {
 цонст усер = усеЦонтект (АутхЦонтект);
 иф (корисник недефинисан) {
 тхров нев Еррор("усеАутхЦонтект се може користити само унутар АутхПровидер");
 }
 повратак корисника;
};

Сада ако код изван провајдера позове АутхЦонтект, ваша апликација ће грациозно обрадити грешку.

Последњи корак је умотавање компоненти користећи контекст са АутхПровидер.јс.

импорт { АутхПровидер } из "./АутхЦонтект";
РеацтДОМ.рендер(




,
 роотЕлемент
);

Ево примера како бисте користили контекст да бисте заштитили страницу од корисника без аутентификације.

импорт усеАутхЦонтект из "./усеАутхЦонтект";
импорт { Навигате } фром "реацт-роутер-дом";
цонст Профил = () => {
 цонст { усер } = усеАутхЦонтект();
 ако (!корисник) {
 повратак ;
 }
 повратак (
 <>
Профил

 );
};

Ова компонента условно пружа страницу профила у зависности од статуса аутентификације корисника. Проверава да ли корисник постоји и ако не постоји, преусмерава га на страницу за пријаву. У супротном, приказује страницу профила.

Када не треба користити Реацт Цонтект АПИ

У овом чланку сте научили како да користите контекст да бисте пратили аутентификованог корисника у свим компонентама. Иако ћете можда бити у искушењу да користите контекст за све своје случајеве коришћења дељења података, не би требало јер то смањује могућност одржавања кода и перформансе. Сваки пут када се вредност контекста промени сваку компоненту која користи поновне приказе стања. Ако податке користи само неколико компоненти, одлучите се за реквизите.

Како користити реквизите у РеацтЈС-у

Реад Нект

О аутору