Стенд на одну ночь с React Hooks

Начало моих новых отношений

Простите меня за такое название, но моя творческая свобода могла придумать только это ... Тем не менее, я серьезно серьезно. Я имею в виду, что Крючки такая красотка которая всех сводит с ума. Фактически, все JavaScript Casanovas просто ищут возможность подключиться к хукам. 😝 Итак, когда мир сходил с ума от React Hooks, мне не потребовалось много времени, чтобы обнаружить крутизну React Hooks. К тому времени я уже мечтал об отдыхе на одну ночь с React Hooks, и, наконец, мне повезло. 😬 Теперь присаживайтесь, и я расскажу вам свою захватывающую историю о том, как я занимался любовью с React Hooks. 🥰

До Hooks я был женат на Class Component, чтобы иметь возможность работать с состояниями. И наши отношения были отличными, может быть, и так. Но все усложняется, по крайней мере, для меня. 🥴

Я уверен, что то же самое и со многими JavaScript Casanovas. Как человеческая черта, мы все мгновенно влюбляемся в новую блестящую вещь. Но с React Hooks все было по-другому, и я клянусь, что это не интрижка. 😌 Хорошо, хватит, теперь не могли бы вы объяснить мне, что такое React Hook? 🙏

Подождите, прежде чем я расскажу о хуках, не имеет ли смысла обсудить мои отношения с обычными Компонентами класса? 🤔 Тогда позвольте мне дать разрешение проверить мою бывшую. 👇

Что ж, она тоже была хорошенькой. По крайней мере, до того, как я увидел Крюков. 😌 И я полагаю, вы могли ясно прочитать те строки комментариев, которые объясняют каждую строку фрагмента кода. Итак, давайте поговорим о методе componentDidMount()lifecycle. Это был де-факто способ получения данных. И люди все еще используют его, и это нормально. В будущих обновлениях React мы могли бы сделать то же самое более эффективно с помощью Suspense. Но давайте оставим это на потом. Вернемся к нашей теме.

Итак, в методе componentDidMount, DidMount проясняется, что, когда этот метод вызывается или запускается, компонент уже был запущен с методом render (), и он будет запускаться снова, когда полученные данные сохраняются в локальном состоянии с помощью setState (). И когда он сохраняется в локальном состоянии, его можно использовать в методе render () для отображения чего-либо или передачи их в качестве свойств.

Пора что-то построить ...

Хватит разговоров, теперь мы создадим небольшое приложение, которое извлекает данные из широко известного HackerNews API и отображает их в нашем приложении. Отлично, пора кодировать…

Вы можете использовать create-react-app или Codesandbox. Для этого урока я порекомендую Codesandbox. Его легко настроить, а также легко запускать и развертывать приложение. Нажмите здесь, чтобы создать новый проект Codesandbox.

Убедитесь, что вы набираете каждую строку кода, а не копируете. Важно напечатать это и попробовать на себе. Хорошо, вы поняли, давайте двигаться дальше ...

Теперь в файле App.js замените содержимое приведенным ниже кодом:

Напоминаем, что здесь мы используем HackerNews API для получения популярных статей о React. И, очевидно, вы можете использовать свой собственный API или любой другой API по своему выбору. Существует также еще один API, предоставляемый JSONPlaceholder для тестирования. Итак, как только данные получены, мы сохраняем их в локальном состоянии, используя метод this.setState(). И, как я объяснял ранее, после того, как он будет сохранен в локальном состоянии, он будет использоваться методом render ().

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

Здесь наш компонент App использует функцию map для создания нового массива с таким же количеством элементов, где каждый элемент является результатом вызова функции, которую мы предоставляем.

В нашем коде есть несколько второстепенных вещей, например: hit, objectID, url, title, и если вам интересно, откуда, черт возьми, все это взялось, откройте HackerNews API в своем браузере или Почтальон. Как вы можете видеть в ответе JSON, hits - это массив данных из HN API, который имеет следующие пары ключей: objectID, url и title.

Вы могли заметить еще одну вещь: в приведенном выше примере я использовал индекс массива элемента в качестве key опоры. React использует key для идентификации элементов в списке. Помните, что React использует виртуальную модель DOM и перерисовывает только те компоненты, которые изменились с момента последней визуализации. Итак, вот оно. Теперь все должно работать нормально.

Попробуйте в Codesandbox.

Познакомьтесь с моей новой девушкой, мисс React Hooks:

А теперь пора познакомить вас со своей новой девушкой, React Hooks. Я знаю, что вы все ждали этого момента. 😏

Часто, когда мы создаем приложения React, мы видим, что пишем почти одинаковые точные коды для двух или более разных компонентов. В идеале в таких случаях мы могли бы извлечь эту повторяющуюся логику в многократно используемый фрагмент кода (перехватчик) и повторно использовать его там, где это необходимо.

В этом вся идея кастомных крючков. Итак, без лишних слов, давайте создадим Custom Hook для извлечения данных из широко известного Hacker News API, чтобы извлекать популярные статьи React из шкафа.

Хорошо, давайте изобретем велосипед с помощью React Hooks:

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

Нажмите здесь, чтобы создать новый проект Codesandbox.

После этого замените файл app.js приведенным ниже кодом.

Если вы написали фрагмент, он, вероятно, покажет некоторые ошибки. Пока не паникуйте.

Итак, здесь мы написали функциональный компонент, который покажет список популярных статей о React из Hacker News. Мы используем ловушку под названием useState, которая отвечает за управление локальным состоянием данных, которые мы собираемся получить для компонента приложения. См. изображение ниже, чтобы получить четкое представление о ловушке useState.

В нашем примере начальное состояние - это пустой список совпадений, который представляет собой объект, представляющий наши данные.

Мы собираемся использовать axios для извлечения данных, но вам решать, использовать ли другую библиотеку для извлечения данных или собственный fetch API браузера. Добавьте axios в качестве зависимости в Codesandbox или введите npm install axios в свой интерфейс командной строки, если вы делаете это в своей локальной системе.

Магия useEffect Hook:

Теперь мы собираемся использовать еще один встроенный хук под названием useEffect. Это позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты могут означать что угодно, от обновления заголовка документа до запроса API. Все, что происходит за пределами вашего дерева рендеринга React, является побочным эффектом для компонента.

Думайте об этом как о функции, которая может обрабатывать события жизненного цикла непосредственно внутри функциональных компонентов. Самое приятное, что useEffect заменяет три разных метода API (componentDidMount, componentDidUpdate и componentWillUnmount). Все с одной функцией! Сумасшедший, не правда ли? Давайте посмотрим на магию, фактически применив ее в нашем примере.

Кроме того, вы можете прочитать Полное руководство по useEffect от Дэна Абрамова для более глубокого понимания useEffect.

Теперь давайте добавим эту функцию в наш компонент приложения, и все должно работать нормально. Обратите внимание, что здесь мы используем async, await для получения данных. В приведенном выше примере мы использовали общий способ работы с обещаниями JavaScript с помощью их блоков then(). А как насчет следующего поколения асинхронных запросов в JavaScript? Вот почему я переделал этот пример, чтобы использовать async / await.

Итак, код выше кажется знакомым и похож на мою бывшую девушку, но в другом костюме. 😜 Да, я говорю о componentDidMount в обычном компоненте класса. Он не совсем похож, но да, теперь он стал более читабельным, более ясным, очень кратким и прямым. Я же говорил вам, React Hook - это красотка. 👌

Но подождите, пока не волнуйтесь. В приведенном выше коде есть ошибка! Красота имеет цену. 😏 Теперь откройте предварительный просмотр на другой странице браузера, затем перейдите на вкладку «Сеть». Как видите, он находится в бесконечном цикле получения данных. Что пошло не так? 🤔 В компоненте класса componentDidMount вызывается после того, как компонент смонтирован. Срабатывает только один раз. Но с другой стороны, эффект внутри useEffect по умолчанию применяется к каждому рендеру. Он позволяет нам передать необязательный аргумент - массив dependencies, который сообщает React, когда следует повторно применить эффект. Если ни одна из зависимостей не изменится, эффект не будет применен повторно. Итак, давайте добавим в конец пустой массив вот так…

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

Инкапсулируем наш пользовательский крючок:

Создайте еще один файл с именем useFetch.js и замените его приведенным ниже кодом.

Довольно прямолинейно. Только не забудьте вернуть объект данных. В противном случае вы увидите примерно такую ​​ошибку: Невозможно прочитать свойство "hits" из неопределенного. Что довольно очевидно, потому что наша функция всегда должна что-то возвращать.

Теперь перейдите в App.js и замените его следующим:

Попробуйте на Codesandbox.

Поздравления !! 🥳 Судя по всему, вы только что влюбились в мою новую девушку, г-жу. Реагировать на крючок. 😜 Также, поздравляем с созданием вашего первого Custom React Hook . 👏

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

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

Вы можете подписаться на меня в Medium и Twitter. Если у вас есть какие-либо сомнения, или вы нуждаетесь в каком-либо наставничестве, или просто хотите небрежно поговорить о своей жизни, не стесняйтесь связаться со мной в Твиттере. Буду рад помочь.

В настоящее время я ищу возможности для фриланса. Я заинтересован в создании любых продуктов Saas и хотел бы услышать ваши идеи. Не стесняйтесь обращаться ко мне по адресу [email protected] 🔥🔥🔥

А пока
Удачного кодирования!

JavaScript на простом английском языке

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube!