В мире современной веб-разработки создание масштабируемых, поддерживаемых и производительных пользовательских интерфейсов является ключевой задачей. Библиотека React предлагает для этого мощную парадигму — компоненты. В сочетании с современными методами стилизации, такими как Module CSS, этот подход позволяет разработчикам создавать по-настоящему модульные и независимые части интерфейса. На этом занятии мы подробно разберем, что такое компоненты в React, какие их типы существуют и как Module CSS помогает решить проблему изоляции стилей.
Компоненты — это фундаментальная и центральная концепция React. По своей сути, компоненты представляют собой независимые и переиспользуемые блоки кода, которые возвращают React-элемент, описывающий, что должно быть отображено на странице. Можно провести аналогию с конструктором Lego: вы создаете небольшие, самостоятельные «кирпичики» (например, кнопку, заголовок, карточку товара, навигационное меню), а затем собираете из них сложные пользовательские интерфейсы.
Основные преимущества использования компонентов:
В истории React существовало два основных типа компонентов: классовые и функциональные.
Классовые компоненты — это ES6-классы, которые наследуются от React.Component. Они использовали метод render() для возврата JSX и могли содержать внутреннее состояние (state) и методы жизненного цикла (например, componentDidMount). Долгое время это был единственный способ создать stateful-компонент.
Функциональные компоненты изначально представляли собой простые JavaScript-функции, которые принимали свойства (props) и возвращали JSX. Они были статичными и не могли управлять собственным состоянием.
Однако с появлением Hooks (хуков) в React 16.8, функциональные компоненты получили полную мощь. Хуки, такие как useState (для управления состоянием) и useEffect (для работы с побочными эффектами и жизненным циклом), позволили функциональным компонентам делать все то же, что и классовые, но с более простым и лаконичным синтаксисом.
На сегодняшний день функциональные компоненты в связке с хуками являются стандартом де-факто и рекомендуемым подходом для создания новых проектов на React. Они проще в чтении, тестировании и позволяют легче повторно использовать логику состояния.