Компоненты являются частью пользовательского интерфейса, что позволяет разбить его на независимые, повторно используемые части и рассматривать каждую часть отдельно. Хотя они похожи на функции JavaScript, они работают независимо и возвращают HTML.
Приложение состоит из нескольких небольших компонентов, которые могут быть вложены друг в друга. Код компонентов размещен в файле JavaScript. Обычно компоненты делятся на два типа: функциональные компоненты и классовые компоненты.
Функциональные компоненты
Функциональный компонент — это функция JavaScript, которая принимает входные данные, называемые реквизитами (свойствами), и возвращает HTML, описывающий пользовательский интерфейс.
Эта функция является допустимым компонентом React, поскольку она принимает один реквизит и возвращает элемент реакции. Эти компоненты функциональны, потому что они буквально являются функциями JavaScript.
Компоненты класса
Компонент класса — это не что иное, как класс ES6, который расширяет класс компонента в реакции. Он должен иметь метод рендеринга, возвращающий HTML.
Рендеринг компонентов
Компоненты React могут представлять как теги DOM, так и пользовательские компоненты:
Разделить компонент на несколько компонентов
Ниже приведен пример компонента Comment. Он принимает автора (объект), текст (строку) и дату (дату) в качестве реквизита и описывает комментарий в социальных сетях.
Компонент с таким количеством вложений может быть трудно модифицировать, и вы не сможете повторно использовать отдельные его части. Итак, вот некоторые компоненты, которые можно извлечь из него:
Компонент аватара
Аватар не должен знать, что он отображается внутри комментария. Поэтому мы дали его свойству более общее имя: пользователь, а не автор. Мы рекомендуем называть реквизиты с точки зрения компонента, а не контекста, в котором он используется.
Компонент информации о пользователе
Компонент аватара используется в компоненте Userinfo.
В результате компонент комментария можно упростить еще больше:
Поначалу извлечение компонентов может показаться утомительным, но наличие палитры повторно используемых компонентов окупается в больших приложениях. Когда компонент вашего пользовательского интерфейса используется неоднократно (кнопка, панель, аватар) или достаточно сложен сам по себе (как в предыдущем комментарии), он, скорее всего, будет извлечен как отдельный компонент.
