Что такое компоненты React? Введение в компоненты | Типы компонентов

Что такое компонент?

Компонент - это независимый, многократно используемый фрагмент кода, который делит пользовательский интерфейс на более мелкие части. Например, если мы создаем пользовательский интерфейс сайта React с помощью Reactjs, мы можем разбить его UI на более мелкие части, как показано на рисунке.

Вместо того чтобы создавать весь пользовательский интерфейс в одном файле, как HTML, мы можем разделить все разделы (отмеченные красным цветом) на более мелкие независимые части. Другими словами, это компоненты. Каждый компонент будет находиться в своем собственном файле JavaScript.

В React у нас есть два типа компонентов: функциональные и классовые. Давайте рассмотрим каждый тип компонентов более подробно. Но перед этим давайте разберемся с извлечением компонентов.

Извлечение компонентов

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

Затем мы можем извлечь код, который используется для какой-то уникальной цели, в отдельный компонент и использовать этот компонент в любом месте нашего приложения, вместо того чтобы переписывать и дублировать код.

В следующих примерах мы уже извлекли компоненты в

1. HelloWorld.js: для отображения заголовка
2. Description.js: для отображения описания

Теперь я могу использовать оба компонента в любом месте приложения без дублирования кода. Это называется извлечением и повторным использованием компонентов.

Что такое функциональные компоненты?

Первый, самый важный и рекомендуемый тип компонента в React - это функциональный компонент. Функциональный компонент - это, по сути, функция JavaScript, которая возвращает элемент React (JSX).

Функциональные компоненты начинаются с ключевого слова function.

Код:

Также можно создать функциональный компонент с помощью синтаксиса стрелочной функции (ES6).

Код:

Что такое компоненты класса?

Другим типом компонента является компонент класса. Так же, как у нас есть функции, в JavaScript есть и классы. Компоненты классов - это классы ES6, которые возвращают JSX. Та же функция HelloWorld может быть преобразована в компонент класса.

Компоненты класса начинаются с ключевого слова class, которое расширяет конструктор Component из React и имеет метод render, возвращающий JSX.

Код: