Компоненты класса React расширены из класса «Компонент», который предоставляется «реакцией». Это полные классы, содержащие события и состояния жизненного цикла. Конструктор super используется для присвоения значений состояниям. this.props предоставляет реквизиты, отправленные компоненту. Им не нужны внешние библиотеки или хуки, когда дело доходит до хранения состояний компонента. Каждый компонент класса должен содержать метод render(), который вызывается всякий раз, когда изменяются значения состояния. Функция render() должна быть чистой, то есть она не должна изменять значения состояния. Он может возвращать фрагмент React, массив элементов, элемент JSX, строку и числа, логические или нулевые значения.
Функциональные компоненты — это просто функции JavaScript, которые возвращают компонент JSX или компонент отображения. Этот компонент отображается в DOM. Эти компоненты по своей природе не имеют состояния и требуют перехватчиков или внешних библиотек для хранения значений состояния. То же самое и с событиями жизненного цикла: им требуются перехватчики для прослушивания или генерации событий жизненного цикла. Они намного проще и полезны, когда все, что вам нужно, это простой дисплей. Объект реквизита отправляется в качестве аргумента функции. Этот объект содержит все реквизиты, отправленные компоненту.
Если компоненту необходимо выполнять гораздо более сложные вычисления с данными или сохранять большое количество состояний, используйте компоненты класса. Компоненты класса используются для приложений и страниц с высокой полезностью. С другой стороны, функциональные компоненты намного легче и легче читаются по сравнению с классами.
Однако с введением хуков функциональные компоненты находятся на одном уровне с классовыми компонентами. Пользователь может свободно использовать функциональные компоненты почти во всех сценариях, не опасаясь упустить функциональные возможности компонентов класса!
