Что такое компоненты в React и как они устроены?

Как устроена концепция компонентов в React?

• React — библиотека для создания пользовательского интерфейса
• Компоненты выступают базовыми блоками интерфейса
• Выделяют два типа: функциональные с хуками и классовые
• Внутри объединяют логику, разметку и стили
• Для входных данных применяются props, а для внутреннего состояния — state
• При изменении данных интерфейс обновляется реактивно
• Подход способствует переиспользованию компонентов и масштабированию UI

Развернутый ответ

Основной ответ

Компоненты в React — самостоятельные переиспользуемые части пользовательского интерфейса, задающие внешний вид и поведение определенного участка UI. В них объединяются логика, разметка (JSX) и состояние, благодаря чему приложение можно разделить на небольшие управляемые элементы. Именно компоненты лежат в основе декларативного подхода React к созданию интерфейсов.

Ключевые положения

• Функциональные и классовые компоненты: начиная с React 16.8 функциональные компоненты, использующие хуки (useState, useEffect и другие), стали основным подходом к управлению состоянием и побочными эффектами. Классовые компоненты применяются реже, но по-прежнему поддерживаются.
• Props и State: props передаются в компонент сверху вниз и не должны изменяться внутри него, что обеспечивает предсказуемость и неизменность входных данных. State представляет внутреннее состояние компонента; его изменение может вызвать повторную отрисовку UI.
• Жизненный цикл: на разных этапах существования компонента можно загружать данные и освобождать ресурсы. В функциональных компонентах для этого используют хуки, например useEffect, а в классовых — методы componentDidMount и componentWillUnmount.
• Переиспользование и композиция: небольшие компоненты можно объединять и на их основе формировать сложные интерфейсы. Это делает код понятнее и упрощает его масштабирование.

Практический контекст

В проектах на React 18 компоненты являются главным способом организации UI. Изменение состояния — через setState в классах или setState хуки — запускает обновление интерфейса, а виртуальный DOM помогает выполнять рендер быстро и эффективно. Хуки делают логику компонентов чище и позволяют разделять ее между разными частями приложения, а type-checking с помощью PropTypes или TypeScript повышает надежность.