Составные компоненты в React

Паттерн "Составные компоненты" позволяет разбивать компонент на несколько частей, которые могут взаимодействовать друг с другом, сохраняя при этом общую внутреннюю логику. Этот подход улучшает гибкость и переиспользуемость компонентов.

💡 Основные понятия:
✔️ Основной компонент: Этот компонент управляет состоянием и логикой.
✔️ Вложенные компоненты: Эти компоненты используют логику основного компонента и позволяют настраивать его отображение и поведение.
✔️ Контекст: Используется для передачи состояния и методов от основного компонента к вложенным.

💡 Объяснение:
❓ Counter: Основной компонент, который управляет состоянием count и предоставляет методы для его изменения через контекст.
❓ CounterContext: Контекст для передачи состояния и методов вложенным компонентам.
❓ Count: Компонент, отображающий текущее значение счётчика.
❓ Increment: Кнопка для увеличения значения счётчика.
❓ Decrement: Кнопка для уменьшения значения счётчика.
❓ Label: Компонент для отображения метки.

В компоненте Usage мы используем все составные части компонента Counter, чтобы создать интерфейс с кнопками для увеличения и уменьшения значения счётчика, меткой и отображением текущего значения.

#frontend #react