React Conf, 2018 стал свидетелем значительного появления в мире React - «ловушек» (доступных с v16.8.0), которые теперь позволяют нам использовать функции компонентов с отслеживанием состояния. в функциональных компонентах. Хуки - это в основном функции, которые позволяют нам включать функции состояния реакции и жизненного цикла без использования классов и организовывать логику внутри компонента в повторно используемые изолированные блоки.

Мы постоянно стремимся совершенствовать наши технологии. Недавно в MakeMyTrip мы обновили наши страницы, добавив на них новейшие технологии. Мы разработали наши страницы на React, чтобы улучшить взаимодействие с пользователем, повысить общую производительность и снизить затраты на инфраструктуру.

Во время нашего путешествия по обновлению нашего веб-сайта с использованием React и OOJ мы разрабатывали приложение с лучшим временем загрузки и улучшенным пользовательским интерфейсом, но как выглядел наш пакет javascript? Бабель переносил наш код на JS, совместимый с браузером. В этом транспилированном коде компоненты реакции, разработанные с использованием классов, были преобразованы в более крупные фрагменты, но функциональные компоненты по-прежнему были меньше по размеру.

Это вызвало обеспокоенность. Действительно ли OOJ решают нашу проблему создания быстрого приложения меньшего размера? Почему не функциональное программирование, если оно создает меньшие фрагменты кода? Как мы можем уменьшить размер нашего пакета? Это было время, когда мы наткнулись на недавно запущенные программы React Hooks, которые предоставляли способ создания функциональных компонентов с отслеживанием состояния наряду с меньшим размером пакета. Кроме того, использование хуков сделало нашу бизнес-логику более управляемой и многоразовой.

Мотивация использования хуков:

Мы видели взлет и падение функционального программирования, но в последние несколько лет мы наблюдаем резкий рост функционального программирования над ООП. Эта меняющаяся тенденция заставила нас сосредоточиться на функциональном программировании, создавая наш код:

  1. Легче читать и тестировать
  2. Меньше кода
  3. Повышение производительности функциональной составляющей

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

Поскольку мы знаем, что классы были введены в ES 2015, что до сих пор не понимается многими браузерами, поэтому мы используем Babel для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript. Я сделал POC относительно того, как использование хуков было бы полезно в нашем проекте для достижения той же цели, что и компоненты с отслеживанием состояния, и вот упрощенная версия POC.

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

Вот небольшой компонент, который я построил обоими способами и получил разницу в размере 4,4 КБ (примерно на 9,6–12,08% меньше) на моей машине разработчика, учитывая, что в нашем проекте много компонентов с несколькими жизненными циклами метод это значение становится заметным, поэтому мы начали использовать хуки для создания наших компонентов для меньшего кода и лучшего шаблона проектирования

Приемы: упрощают нашу жизнь:

  1. Введение в хуки позволило повторно использовать логику с отслеживанием состояния между компонентами: это может быть достигнуто путем написания наших собственных хуков, которые можно использовать внутри любых компонентов. Например, создание пользовательского хука для вызовов API.
  2. Написание сложных компонентов станет проще: много раз много бизнес-логики написано в нашем методе жизненного цикла, что затрудняет понимание и отладку. Вместо этого хуки позволяют нам разделить эту логику на более мелкие изолированные функции.

Использование состояний в функциональном компоненте: обработчик состояний

Чтобы использовать состояния в функциональном компоненте, React теперь представил useState.

Давайте посмотрим, как использовать этот хук:
const [count, setCount] = useState (10);

Здесь useState объявляет переменную состояния с именем count (имя может быть любым), useState не принимает ни одного аргумента или не принимает один аргумент, который является значением начального состояния. , здесь я передаю значение по умолчанию как 10, в отличие от компонента класса нам не нужно устанавливать значение состояния в форме объекта, оно может иметь любой тип данных, например строку, число и т. д. на.

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

Выполнение побочных эффектов в функциональном компоненте: обработчик эффекта

В React v16.8.0 появился новый перехватчик под названием useEffect, который позволяет нам реализовывать методы жизненного цикла, которые были встроены в компоненты на основе классов. Используя этот хук, мы сообщаем React, что компонент должен что-то сделать после рендеринга. React запомнит переданную функцию и вызовет ее позже после выполнения обновлений DOM.

По умолчанию он запускается после каждого рендеринга, и его поведением можно управлять для реализации методов жизненного цикла.

В этой статье я покажу, как реализовать:

  1. componentDidMount ()
  2. componentDidUpdate ()
  3. componentWillUnmount ()
useEffect(() => {
    // perform a task
});

Реализация componentDidMount () с помощью хуков:

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

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

useEffect(() => {
    // perform a task
}, []);

Реализация componentDidUpdate () с помощью хуков:

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

componentDidUpdate(prevProps) {
  if (this.props.value !== prevProps.value) {
    this.fetchData(this.props.value);
  }
}

Итак, чтобы реализовать componentDidUpdate (), мы можем просто добавить зависимость в массив, который передается как второй аргумент в useEffect. Теперь логика будет выполняться только при изменении этого конкретного значения.

useEffect(() => {
   fetchData(props.value);
}, [props.value]);

Реализация componentWillUnmount () с помощью хуков:

До сих пор мы видели, что используемая функция useEffect ничего не возвращает, useEffect может либо ничего не возвращать, либо возвращать функцию, которая выполняется:

  1. Перед использованием Эффект запускается в следующий раз
  2. Когда компонент отключается (логика внутри функции, переданной в ловушку, не будет выполнена)
useEffect(() => {
   console.log('Logic...')
   return () => {
      console.log('Cleaning up...') 
   }
}, [props.value]);

Вот сравнение хуков жизненного цикла, реализованных в Class Component и Functional Component:

Правила использования крючков:

  • Call Hooks только на верхнем уровне. Не пытайтесь вызывать хуки внутри циклов, условий или вложенных функций.
  • Вызов хуков только из компонентов функции React. Не пытайтесь вызывать хуки из обычных функций JavaScript.

Заключение

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

Надеюсь, эта статья окажется для вас полезной. Удачного обучения!