Основные отличия: когда выбирать одно из них, и почему вы должны знать и то, и другое

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

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

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

Путешествие в прошлое

Чтобы понять различия, важно знать, какой была раньше экосистема React. Много лет назад функциональные компоненты использовались только для рендеринга JSX для отображения содержимого пользователю. С другой стороны, компоненты класса также могли использовать систему методов жизненного цикла или систему состояний.

В феврале 2019 года команда React представила хуки как новое дополнение к React v16.8.0. React Hooks предоставил функциональным компонентам те же возможности, что и компоненты класса, с возможностью использовать систему состояний и достигать тех же результатов, что и методы жизненного цикла компонентов класса.

А теперь проанализируем основные отличия.

1. Визуализация JSX для отображения содержимого

JSX означает JavaScript XML. Как поясняет W3Schools, это позволяет нам писать HTML-элементы на JavaScript и размещать их в DOM без использования каких-либо createElement() и / или appendChild() методов.

Отрисовка JSX в компоненте класса

Компоненты класса - это классы ES6, которые расширяют метод рендеринга React.Component:

Вы также можете добиться того же результата с помощью деструктурирования:

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

Функциональные компоненты - это функции JavaScript, возвращающие JSX:

2. Состояние обработки

С помощью системы состояний мы создаем объект JavaScript, содержащий некоторые данные, строго относящиеся к компоненту, над которым мы работаем. До Hooks систему состояний можно было использовать только с компонентами класса. Но с этим новым дополнением теперь можно получить тот же результат с функциональными компонентами.

Чтобы лучше увидеть разницу между двумя компонентами, давайте создадим простой счетчик, который начинается с нуля и увеличивается при нажатии кнопки +.

Состояние обработки в компоненте класса

В компоненте класса мы инициализируем наш объект состояния вверху, содержащий свойство с именем count, и устанавливаем его в 0. Мы ссылаемся на нашу часть состояния внутри метода рендеринга с помощью this.state.count. Наконец, мы вызываем стрелочную функцию, которая меняет состояние count на this.setState всякий раз, когда пользователь нажимает на +.

Обработка состояния в функциональном компоненте

В функциональном компоненте сначала нам нужно получить функцию useState из библиотеки React. Затем мы используем деструктуризацию массива , чтобы инициализировать новую часть состояния. Первая переменная внутри массива count - это часть состояния, которую мы пытаемся отслеживать, а второй элемент (setCount) - это функция, которую мы вызываем для обновления нашей части состояния. useState принимает один аргумент, который является значением по умолчанию для нашей части состояния. Наконец, мы вызываем стрелочную функцию, которая изменяет состояние count с использованием setCount всякий раз, когда пользователь нажимает на +.

3. Передача реквизита

Чтобы передавать данные в качестве параметров от одного компонента React к другому, мы используем свойства React.

Передача props в компоненте класса

В компоненте класса реквизиты принимаются с использованием this.

Передача реквизита в функциональный компонент

В функциональном компоненте мы передаем реквизиты в качестве аргумента функции.

4. Система методов жизненного цикла

Каждый компонент в React проходит через жизненный цикл событий. Жизненные циклы играют важную роль во времени рендеринга. Примером метода жизненного цикла является componentDidMount(), который соответствует useEffect() методу в функциональном компоненте.

componentDidMount () в компоненте класса

componentDidMount - это метод жизненного цикла, который вызывается после того, как компонент монтируется в DOM.

useEffect () в функциональном компоненте

Чтобы получить тот же результат в функциональном компоненте, мы используем хук useEffect со вторым аргументом [].

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

В этой статье мы заметили, что сегодня компоненты классов и функциональные компоненты обладают одинаковыми возможностями. Это приводит к важному вопросу: «Какой из них мы должны изучить и использовать?»

Ответ прост: оба!

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

С другой стороны, любая компания, которая работает над новым проектом, может использовать либо компоненты класса, либо функциональные компоненты.

Понимание обоих подходов поможет нам определить, какой из них использовать в той или иной ситуации.