Компонент в React — это переиспользуемый UI-элемент, либо class-компонент, либо функциональный компонент, который фокусируется исключительно на отображении и рендеринге. Он получает данные через props и рендерит визуальный интерфейс без прямого управления состоянием.
Контейнер — это неформальный термин для компонента, который подключён к Redux store. Он служит мостом между Redux и презентационными компонентами.
Компоненты (презентационные)
propsКонтейнеры (умные компоненты)
Контейнеры обычно следуют такому паттерну:
Container Component
├── Подписан на Redux state
├── Диспатчит Redux actions
└── Рендерит презентационные компоненты
└── Передают props дочерним компонентам
Контейнер извлекает state из Redux, преобразует его в props и передаёт вниз презентационным компонентам. Когда пользователь совершает какие-то действия, контейнер диспатчит соответствующие Redux actions.
Такое разделение следует принципу separation of concerns, делая кодовую базу более поддерживаемой, а компоненты — более переиспользуемыми в разных Redux store или приложениях.
Presentational компонент в React знает о Redux state и может напрямую подписаться на обновления store без container компонента.
Новый — ещё не проверен сообществом
Вы