Контейнер срещу презентационни компоненти в React

Основното нещо, което трябва да се има предвид, е, че компонентите на контейнерите и презентационните компоненти отиват заедно, когато настройват йерархия на компонентите на React. Приложенията за реагиране почти винаги се нуждаят от някои компоненти, които поемат отговорност за начина на работа, и компоненти за показване на действителни данни. Когато презентационните компоненти не управляват състоянието, компонентите на контейнерите правят. Когато презентационните компоненти обикновено са деца в йерархията на компонентите на приложението, компонентите на контейнерите обикновено са родители на презентационни компоненти.

Какво представляват компонентите на контейнера?

  • Компонентите на контейнерите се занимават основно с това как работят нещата
  • те рядко имат свои собствени HTML тагове, освен опаковане
  • те често са държавни
  • те са отговорни за предоставянето на данни и поведение на децата си (обикновено презентационни компоненти)

Ето пример за компонент на контейнер:

клас Колаж разширява Компонент {
   конструктор (подпори) {
      супер (подпори);
      
      this.state = {
         изображения: []
      };
   }
   компонентDidMount () {
      донесе ( "/ API / current_user / image_list")
         .then (отговор => response.json ())
         .then (изображения => this.setState ({images}));
   }
   render () {
      връщане (
         
            {this.state.images.map (изображение => {                
                                               })}                 )    } }

За разлика от това, какво представляват презентационните компоненти?

  • Презентационните компоненти се занимават предимно с това как изглеждат нещата
  • вероятно съдържат само метод на изобразяване и малко друга логика
  • те не знаят как да заредят или променят данните, които предават
  • те се пишат най-добре като функционални компоненти без гражданство

Ето пример за презентационен компонент:

// дефиниране на компонента като реактивен компонент
изображението на клас се разширява Компонент {
   render () {
      връщане ;
   }
}
експортиране на изображение по подразбиране
// определяне на компонента като константа
const Image = реквизит => (
   
)
експортиране на изображение по подразбиране

С презентационни компоненти имате възможност да ги дефинирате като редовни реагиращи компоненти или като константи. Определянето им като константи може да помогне за премахване на някои зависимости и импортиране на допълнителни редове от код. По този начин определянето на презентационни компоненти като константи може да намали времето за зареждане на приложението, ако имате много данни за зареждане.

Разделяне на проблемите с използването на контейнерен компонент

За щастие, използвайки React, ние имаме възможността да съставим нашия потребителски интерфейс от множество компоненти на React. Имайки това предвид, можем да разделим горния пример за компонент на два компонента. Първо, ние разделихме UI слоя в презентационен компонент. Тогава ние бихме превърнали този презентационен компонент в по-голям контейнер, който предава реквизитите в презентационни компоненти като деца. По този начин контейнерът може да обработва състоянието и всяка друга логика на приложението.

Ето как може да изглежда това:

const Image = реквизит => (
   
)
експортиране на изображение по подразбиране
клас ImageContainer разширява React.Component {
   конструктор () {
      супер ();
      
      this.state = {
         изображения: []
      };
   }
   компонентDidMount () {
      донесе ( "/ API / current_user / image_list")
         .then (отговор => response.json ())
         .then (изображения => this.setState ({images}));
   }
   render () {
      връщане (
         
            {this.state.images.map (изображение => {                <Изображение на изображението {{изображение} />             })}                 )    } } експортиране по подразбиране ImageContainer

За да обобщим, разделихме оригиналния компонент на две части. Цялото състояние, съдържащо се в нашия контейнер ImageContainer, и нашата логика е все едно и също. Презентационният компонент Image е без състояние и сега е невероятно стабилен и кратък. По този начин, ако данните на API се променят (например, ако src е променен на връзка), бихме могли да направим тази актуализация в рамките на един презентационен компонент, който ще актуализира всички деца на тази карта функция. Това също ни позволява да изобразим възможно най-много изображения, тъй като Image вече е компонент за многократна употреба в React. Винаги помнете, че компонентите за многократна употреба са може би един от най-мощните аспекти на React, така че е важно винаги да имате това предвид, когато проектирате структурата на приложението си.