Као Реацт или Реацт Нативе програмер, важно је разумети концепт контејнерских и презентационих компоненти.
Ови обрасци дизајна помажу у правилном раздвајању брига. Можете користити овај концепт да бисте осигурали да структурирате свој код на начин који је лакше одржавати и скалабилнији.
Шта су компоненте контејнера?
Компоненте контејнера, познате и као паметне компоненте, одговорне су за управљање подацима и логиком у вашој апликацији. Они се баве задацима попут преузимања података из АПИ-ја, ажурирања стања и обраде интеракција корисника.
Да бисте имплементирали ову структуру, можете користити библиотека као што је Реацт-Редук да повежете своје компоненте са радњом и проследите податке и радње доле вашим подређеним компонентама или компонентама презентације.
Шта су презентацијске компоненте?
Презентационе компоненте су одговорне за приказивање података из својих надређених компоненти. Често су без држављанства и фокусирају се на кориснички интерфејс и визуелни приказ података.
Ово стање их чини лаким за манипулисање и тестирање, због чега добијају назив глупих компоненти. Глупо стање презентационих компоненти омогућава вам да их поново користите у целој апликацији. Ово избегава лош и понављајући код.
Зашто користити контејнерске и презентацијске компоненте?
Кратак и једноставан одговор на питање је: Раздвајање брига. Ово је кључни принцип у неколико парадигми, укључујући објектно оријентисано, функционално и аспектно оријентисано програмирање. Међутим, многи Реацт програмери имају тенденцију да игноришу ове концепте и одлучују се за писање кода који једноставно функционише.
Код који само ради је одличан, све док не престане да ради. Лоше организован код је теже одржавати и ажурирати. Ово може отежати додавање нових функција или довођење других програмера да раде на пројекту. Отклањање ових проблема када су већ створени представља оптерећење и боље их је спречити од почетка.
Примена шаблона дизајна контејнера и компоненти презентације обезбеђује да свака компонента у оквиру вашег пројекта има јасан задатак којим се бави. Ово постиже модуларну структуру у којој се свака оптимизована компонента спаја да доврши вашу апликацију.
Ваше компоненте се и даље могу преклапати; подела дужности између контејнера и презентационе компоненте није увек јасна. Међутим, као опште правило, требало би да фокусирате своје презентацијске компоненте на визуелне податке, а компоненте контејнера на податке и логику.
Како користити контејнерске и презентацијске компоненте у Реацт Нативе-у
У типичној Реацт Нативе апликацији, уобичајено је креирати компоненте које садрже и презентацијски и логички код. Можете преузети податке из АПИ-ја, управљати стањем обрасца и приказати излаз све у једној класи. Размислите о једноставној апликацији која ће преузети листу корисника из АПИ-ја и приказати њихова имена и године.
То можете да урадите са једном компонентом, али то ће резултирати кодом који је тешко читати, који се не може поново користити и тежи за тестирање и одржавање.
На пример:
увоз Реагујте, { усеСтате, усеЕффецт } из'реаговати';
увоз { Приказ, текст, равна листа } из'реацт-нативе';конст УсерЛист = () => {
конст [корисници, сетУсерс] = усеСтате([]);усеЕффецт(() => {
конст фетцхУсерс = асинц () => {
конст одговор = чекати донеси (' https://example.com/users');
конст подаци = чекати респонсе.јсон();
сетУсерс (подаци);
};фетцхУсерс();
}, []);повратак (
подаци={корисници}
кеиЕктрацтор={итем => итем.ид}
рендерИтем={({ итем }) => (Назив: {итем.наме}</Text> Старост: {итем.аге}</Text>
</View>
)}
/>
);
};
извозУобичајено УсерЛист;
У овом примеру, УсерЛист је одговоран за управљање стањем поља за унос, преузимање података из АПИ-ја и приказивање података.
Бољи и ефикаснији начин да се ово примени је да се логика у УсерЛист-у одвоји на компоненте презентације и контејнера.
Можете креирати а УсерЛистЦонтаинер компонента која је одговорна за преузимање и управљање корисничким подацима. Затим може проследити ове податке у компоненту презентације, УсерЛист, као реквизит.
увоз Реагујте, { усеСтате, усеЕффецт } из'реаговати';// Компонента контејнера
конст УсерЛистЦонтаинер = () => {
конст [корисници, сетУсерс] = усеСтате([]);усеЕффецт(() => {
конст фетцхУсерс = асинц () => {
конст одговор = чекати донеси (' https://example.com/users');
конст подаци = чекати респонсе.јсон();
сетУсерс (подаци);
};фетцхУсерс();
}, []);повратак<УсерЛисткорисника={усерс} />;
};
извозУобичајено УсерЛистЦонтаинер;
Можете да одвојите презентацију између две компоненте: Корисник и УсерЛист. Сваки је одговоран за једноставно генерисање ознака на основу улазних реквизита које прима.
увоз { Приказ, текст, равна листа } из'реацт-нативе';// Презентациона компонента
конст Корисник = ({ име година }) => (Име: {наме}</Text> Старост: {аге}</Text>
</View>
);
// Презентациона компонента
конст УсерЛист = ({ корисника }) => (
подаци={корисници}
кеиЕктрацтор={итем => итем.ид}
рендерИтем={({ итем }) => <Корисникиме={Назив производа}старости={итем.аге} />}
/>
);
Нови код одваја оригиналну компоненту на две презентацијске компоненте, Корисник и УсерЛисти једна компонента контејнера, УсерЛистЦонтаинер.
Најбоље праксе за примену контејнерских и презентационих компоненти
Када користите компоненте контејнера и презентације, важно је да следите неке најбоље праксе како бисте били сигурни да компоненте раде како је предвиђено.
- Свака компонента треба да има јасну и специфичну улогу. Компонента контејнера треба да управља стањем, а компонента за презентацију треба да управља визуелном презентацијом.
- Где је могуће, користите функционалне компоненте уместо компоненти класе. Једноставније су, лакше се тестирају и пружају боље перформансе.
- Избегавајте укључивање логике или функционалности у компоненту која није релевантна за њену намену. Ово помаже да компоненте буду фокусиране и лаке за одржавање и тестирање.
- Користите реквизите за комуникацију између компоненти, јасно одвајајући бриге и избегавајући тесно повезане компоненте.
- Непотребна ажурирања стања могу довести до проблема са перформансама, тако да је важно ажурирати стање само када је то неопходно.
Праћење ових најбољих пракси осигурава да ваш контејнер и компоненте презентације ефикасно раде заједно обезбедите чисто, организовано и скалабилно решење за управљање стањем и визуелном презентацијом у вашој Реацт Нативе апликацији.
Предности коришћења контејнерских и презентационих компоненти
Контејнерске и презентацијске компоненте могу пружити неколико предности. Они могу помоћи у побољшању структуре кода, могућности одржавања и скалабилности. Они такође резултирају бољом сарадњом и делегирањем задатака међу тимовима. Они чак могу довести до повећања перформанси и оптимизације ваше Реацт Нативе апликације.
Пратите најбоље праксе за имплементацију ових компоненти и можете да направите боље и скалабилније Реацт Нативе апликације.
