React·100 вопросов

Что такое компонент и какие виды компонентов бывают?

Ответ

Компонент в React представляет собой независимый, изолированный и повторно используемый блок пользовательского интерфейса, который инкапсулирует в себе как визуальную разметку, так и логику поведения. С концептуальной точки зрения компоненты похожи на JavaScript-функции, которые принимают на вход произвольные параметры и возвращают описание того, как должен выглядеть конкретный участок веб-страницы.

Исторически и архитектурно в React выделяют несколько разновидностей компонентов, каждый из которых имеет свои особенности применения.

Функциональные компоненты являются современным стандартом разработки в экосистеме React, написанные в виде обычных JavaScript-функций с использованием хуков для управления состоянием.
Классовые компоненты основаны на объектно-ориентированном подходе с использованием синтаксиса классов ES6, сегодня они встречаются преимущественно в старых legacy-проектах и требуют знания метода render и метода жизненного цикла componentDidMount.
Презентационные компоненты отвечают исключительно за внешний вид и вывод данных, получая всю необходимую информацию через пропсы без сложной бизнес-логики.
Контейнерные компоненты управляют логикой приложения, делают сетевые запросы, обрабатывают данные и передают их дочерним презентационным компонентам.

При проектировании архитектуры приложения крайне важно отдавать приоритет композиции компонентов, а не наследованию. Композиция позволяет строить сложные интерфейсы путем вложения простых независимых элементов друг в друга, что делает код гибким и легко тестируемым. Например, компонент модального окна может принимать любой контент через специальный пропс children, что делает его универсальным для всего приложения.

Полезен ли этот ответ?

Другие вопросы этой темы

Связанные вопросы из других тем