AIKraft/AI/Войти
AIKraft/Skills/Паттерн Presentational Container

Паттерн Presentational Container

Teaches the presentational/container pattern for separating view and logic. Use when you want to isolate data fetching and business logic from UI rendering for better testability and reuse.

patternsdev official Дизайн

Что делает навык

Навык объясняет паттерн Presentational/Container для разделения представления и логики в React. Он помогает изолировать получение данных и бизнес-логику от рендеринга UI для повышения тестируемости и переиспользования компонентов.

Когда применять

  • Когда требуется четкое разделение между логикой получения данных и рендерингом UI.
  • Когда нужно сделать presentational-компоненты переиспользуемыми и простыми для тестирования.
  • Когда архитектура приложения выигрывает от явного разделения ответственности между состоянием и представлением.

Как работает

  1. Разделить компонент на два уровня: Container (отвечает за получение данных и состояние) и Presentational (отвечает только за отображение данных через props).
  2. Сделать Presentational-компоненты чистыми функциями, которые не модифицируют полученные данные и не содержат собственного состояния (кроме UI-состояния).
  3. Использовать Container-компоненты для обертывания Presentational-компонентов и передачи им данных.
  4. Рассмотреть использование кастомных Hooks как более современной альтернативы Container-компонентам для инкапсуляции логики данных без лишнего уровня вложенности.

Примеры запросов агенту

Как разделить компонент отображения списка собак на контейнер и презентентационный компонент?
Применить паттерн Presentational/Container для изоляции логики получения данных от UI.
Заменить Container-компонент на кастомный Hook для разделения логики и представления.

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «presentational-container-pattern» из репозитория: # https://github.com/patternsdev/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r presentational-container-pattern/ ~/.claude/skills/presentational-container-pattern/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.