⚡Введение
В React есть два способа написания компонента React. Функциональные компоненты и компоненты класса. В настоящее время чаще всего используются функциональные компоненты.
Эта статья поможет вам понять реальную разницу между компонентами класса и функциональными компонентами в React Js.
Что такое компоненты в React?
Компонент — это один из основных строительных блоков React. Другими словами, мы можем сказать, что каждое приложение, которое вы будете разрабатывать в React, будет состоять из частей, называемых компонентами. Компонент — это то, что возвращает либо элемент JSX, либо значение Null.
Компоненты класса
Компонент класса в реакции — это обычный класс ES6, который расширяет класс компонентов библиотеки React. Его также называют компонентом с отслеживанием состояния, поскольку он контролирует изменение состояния и реализацию логики компонента. Кроме того, у них есть доступ ко всем фазам метода жизненного цикла React. До появления React Hooks компонент класса был единственным вариантом для создания динамического и повторно используемого компонента, поскольку он давал нам доступ к методам жизненного цикла и всем функциям React.
Давайте рассмотрим пример компонента класса, в котором мы создали счетчик следующим образом.
В приведенном выше примере мы создали класс с конструктором и методом рендеринга. Мы устанавливаем начальное состояние с помощью инструкции this.state в конструкторе. Мы используем this.setState() для обновления состояний внутри компонента. Мы установили начальное состояние конструктора в 0. Мы добавили две функции handleIncrement() и handleDecrement() для увеличения и уменьшения счетчика, когда пользователь нажимает кнопку увеличения или уменьшения.
Методы жизненного цикла
Методы жизненного цикла играют важную роль в определении времени рендеринга компонента. Давайте взглянем на некоторые методы жизненного цикла.
При монтировании (componentDidMount)
Этот метод жизненного цикла вызывается сразу после первого рендеринга компонента. Это в основном используется для асинхронных вызовов API. В функциональном компоненте componentDidMount заменен на хук useEffect с пустым массивом зависимостей.
При обновлении (componentDidUpdate)
Этот метод жизненного цикла не вызывается сразу после рендеринга компонента. Это вызывается сразу после обновления любого состояния внутри компонента. В функционале componentDidUpdate заменен на хук useEffect с непустым массивом зависимостей.
При размонтировании (componentWillUnmount)
Этот метод жизненного цикла вызывается сразу после размонтирования компонента. Это особенно полезно, когда нам нужно очистить подписки, такие как функция clearInterval, иначе это может вызвать серьезную утечку памяти в более крупном проекте. В функциональном компонентеWillUnmount заменен на хук useEffect с функцией очистки.
Теперь давайте преобразуем компонент класса в функциональный компонент, чтобы различать их.
Функциональные компоненты
Функциональный компонент в реакции похож на простую функцию javascript, которая возвращает JSX. До выпуска хуков в React 16.8 их в основном называли компонентами без состояния, потому что тогда они только принимали и возвращали данные для рендеринга в DOM (без обработки какого-либо состояния). Посмотрите следующий пример создания простого функционального компонента.
Мы также можем использовать стрелочные функции, представленные в ES6, следующим образом.
До React 16.8 компонент класса был единственным вариантом для доступа к дополнительным функциям React, таким как состояние и методы жизненного цикла React. Однако с помощью хуков мы можем реализовать состояние и другие функции React, и, что наиболее важно, мы можем написать весь наш пользовательский интерфейс с функциональными компонентами.
Что такое крючки?
Хуки — это функции, которые позволяют нам использовать состояние React и функции жизненного цикла внутри функциональных компонентов. Хуки не работают внутри классов, они позволяют использовать React без классов.
В React есть два наиболее часто используемых хука.
- Хук useState
- использовать эффект хука.
Мы рассмотрим пример понимания обоих хуков. Если вы новичок в React, вы можете узнать больше о React Hooks здесь.
Что такое хук useState?
Хук useState позволяет нам добавить состояние к функциональному компоненту. Он принимает аргумент, который является начальным значением свойства состояния, и возвращает текущее значение свойства состояния и метод, способный обновлять это свойство состояния.
Мы можем использовать хук useState следующим образом.
Хук useState вернет пару значений: текущий счетчик и функцию setCount, которая обновляет счетчик состояния.
Давайте рассмотрим пример функционального компонента, в котором мы создали счетчик с помощью хука useState следующим образом.
Что такое useEffect Hook?
useEffect() используется для создания побочных эффектов в функциональных компонентах, а также может обрабатывать методы жизненного цикла componentDidMount(), componentDidUpdate() и componentWillUnmount() компонентов на основе классов в функциональный компонент.
Хук useEffect принимает 2 аргумента.
- Обратный вызов — это функция, содержащая логику побочного эффекта. Обратный вызов выполняется сразу после того, как изменения были отправлены в DOM.
- Зависимость — это необязательный массив зависимостей. useEffect выполняет обратный вызов, только если зависимости изменились между рендерингами.
Поместите свою логику побочного эффекта в функцию обратного вызова, а затем используйте аргумент зависимостей, чтобы контролировать, когда вы хотите, чтобы побочный эффект выполнялся. Это единственная цель useEffect.
Аргумент зависимости позволяет нам управлять запуском побочного эффекта. Мы можем указать зависимость тремя способами, которые объясняются следующим образом.
- Зависимости не предусмотрены
- Пустой массив зависимостей
- Имеет зависимости
Зависимости не предусмотрены
В этом случае побочный эффект запускается после каждого рендеринга.
Пустой массив зависимостей
В этом случае побочный эффект запускается один раз после первоначального рендеринга.
Имеет зависимости
В этом случае побочный эффект запускается только при изменении любого значения зависимости.
Очистка побочных эффектов
Если обратный вызов useEffect возвращает функцию, то useEffect рассматривает это как очистку эффекта. Обычными асинхронными побочными эффектами являются: выполнение запросов на выборку для загрузки данных с удаленного сервера, обработка таймеров, таких как setTimeout(), функции устранения дребезга или ограничения и т. д.
Что такое функция очистки?
Функция очистки предотвращает утечку памяти и устраняет некоторые ненужные и нежелательные действия. Обратите внимание, что вы не обновляете состояние внутри возвращаемой функции.
Очистка работает следующим образом:
- После первоначального рендеринга useEffect вызывает обратный вызов с побочным эффектом. Функция очистки не вызывается.
- При более поздних отрисовках перед вызовом следующего обратного вызова побочного эффекта useEffect вызывает функцию очистки из предыдущего выполнения побочного эффекта (чтобы очистить все после предыдущего побочного эффекта), а затем запускает текущий побочный эффект.
- Наконец, после размонтирования компонента useEffect вызывает функцию очистки от последнего побочного эффекта.
Давайте рассмотрим пример функционального компонента, в котором мы создали таймер с помощью хука useEffect следующим образом.
Заключение
Я хотел бы сделать вывод, что есть плюсы и минусы в обоих стилях. Я не обязательно думаю, что один лучше, чем другой. Функциональному программисту может быть проще использовать функциональные компоненты, в то время как объектно-ориентированному программисту может быть проще использовать классовые компоненты.
Лично мне нравится использовать функциональные компоненты, они написаны короче и проще, что облегчает чтение, написание и тестирование, потому что это просто функции JS. Компоненты класса могут сбивать с толку при использовании this.Используя функциональные компоненты, мы можем легко избежать такого беспорядка и сохранить все в чистоте.
В Scalereal мы верим в совместное использование и открытый исходный код.
Итак, если вы нашли это полезным, пожалуйста, похлопайте 👏 и поделитесь им со всеми.
Делиться - значит заботиться!
Спасибо ;)
