Реагировать на функциональные и классовые компоненты

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

Компонент реакции — это просто функция, которая возвращает элемент, описывающий, что должно появиться на экране. Существует два разных типа компонентов React. Существуют функциональные компоненты и классовые компоненты.

Функциональные компоненты

Функциональные компоненты — это просто базовые функции. Они возвращают то, что следует добавить в пользовательский интерфейс. Вот пример функционального компонента.

В этом примере мы видим, что компонент настроен так же, как и любая другая обычная стрелочная функция. Он принимает «реквизит» в качестве параметра, который является общим для компонентов, параметрами всегда должно быть слово «реквизит». Также вы можете видеть внутри функции, что свойства объекта реквизита отображаются в DOM. Все в этой функции заключено в ‹div›, потому что компоненты могут возвращать только один элемент.

Компоненты класса

Компоненты класса отличаются от функциональных компонентов тем, что в первую очередь это класс. Во-вторых, они могут быть функциями-конструкторами. В-третьих, они поддерживают методы, которых нет у функциональных компонентов. Например, компоненты класса имеют состояние. Состояние также можно изменить с помощью метода set.State(). Ниже приведен пример компонента класса.

Выше вы можете видеть, что класс создается путем «расширения» компонента реакции. Конструктор использует props в качестве своих параметров, как и функциональные компоненты, но также использует super(), который инициализирует ключевое слово this после вызова. В конструкторе задается свойство состояния. Существует также пример изменения состояния с помощью set.State() в функции handleInputChange(). Кроме того, классы рендерятся, потому что это в значительной степени вся суть компонента.

Вывод

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