Для создания компонентов React не обязательно использовать классы, существуют и альтернативные способы:
See the Pen js_react_functional_components by Hexlet (@hexlet) on CodePen.
Компоненты, созданные как функции, называются функциональными. Они принимают объект со свойствами как первый аргумент и также начинаются с большой буквы.
Функциональные компоненты стали превалировать над классовыми с появлением хуков. Они более лаконичны и позволяют писать чистый код. Еще у них нет своего изменяемого состояния, поэтому их легче тестировать и переиспользовать. В то же время, функциональные компоненты не включают методы жизненного цикла, что может ограничивать их использование. В следующем курсе мы начнем использовать функциональные компоненты и познакомимся с основными хуками React.
Пространства имён
Вспомните пример из прошлого урока, связанный с использованием компонентов-потомков, созданных специально для родительского компонента:
<Card>
<CardTitle>Title</CardTitle>
<CardBody>
<b>Body</b>
</CardBody>
</Card>
Следуя сказанному выше, компоненты <CardTitle> и <CardBody> должны быть реализованы как функциональные.
Но это еще не всё, можно пойти дальше и реализовать такую структуру:
import Card from './Card.jsx';
<Card>
<Card.Body>
<Card.Title>Title</Card.Title>
</Card.Body>
</Card>
JSX поддерживает механизм пространств имён. Не сказать, что без него нельзя жить, но он довольно удобен. Во-первых, достаточно импортировать только компонент верхнего уровня, а остальное доступно уже через него, что довольно логично, если смотреть на JSX как на JS-код. Во-вторых, так лучше задаётся семантика.
Реализуется подобный механизм через статические свойства.
Такой способ компоновки не требует того, чтобы все компоненты были созданы в одном файле. Структура может быть любой, для остального есть импорты.
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
