Добро пожаловать, читатель еще одного блога, где я пытаюсь объяснить текущую тему в мире разработки программного обеспечения. В предыдущем блоге я рассказал о том, как использовать React Hooks, в частности, useState. Если вы хотите прочитать этот блог и узнать больше о хуке useState, нажмите здесь. В этом блоге основное внимание будет уделено, вероятно, второй по важности ловушке - ловушке useEffect.
useEffect Hook
Назначение ловушки useEffect - позволить вам выполнять побочные эффекты в функциональных компонентах. Примеры побочных эффектов, которые вы обычно будете выполнять в приложении React: выборка данных, настройка подписки и ручное изменение DOM в компонентах React.
Если вы использовали методы жизненного цикла в компоненте класса React, ловушка useEffect будет эквивалентна ComponentDidMount, ComponentDidUpdate и ComponentWillUnmount. Чтобы помочь вам лучше понять мое предыдущее утверждение, я дам вам примеры того, как ловушка useEffect похожа на эти методы жизненного цикла.
Получение данных
В типичном компоненте на основе класса React вы будете использовать ComponentDidMount метод жизненного цикла для выполнения сетевых запросов. Хук useEffect может помочь нам выполнить ту же задачу. Ниже приведен пример функционального компонента, который получает список сообщений из JSONPlaceholder API.
В первой строке кода я импортирую ловушку useState, чтобы иметь возможность иметь состояние в моем функциональном компоненте и ловушке useEffect. Кроме того, я использую библиотеку axios для сетевого запроса вместо fetch api.
Функция fetchPosts использует библиотеку axios для получения всех сообщений, предоставленных JSONPlaceholder API. Также он использует функцию setPosts, предоставляемую ловушкой useState, для добавления сообщений, возвращаемых из моего сетевого запроса, в мою константу posts. Если эта часть кажется запутанной, прочтите мой предыдущий блог о том, как использовать ловушку useState.
Между строками 14 и 16 мы используем наш useEffect hook. Хук useEffect ожидает по крайней мере один аргумент. Первый аргумент - это функция обратного вызова, и внутри этой функции обратного вызова вы будете выполнять свой сетевой запрос. В нашем случае я передал эту логику функции fetchPosts , чтобы сделать код более читабельным.
Второй необязательный аргумент - это массив. По умолчанию ловушка useEffect запускается после каждого рендеринга или обновления, что может помочь свести к минимуму ошибки, но также может вызвать проблемы с производительностью. В нашем случае мы получаем данные, если мы не передадим пустой массив в качестве второго аргумента useEffect войдет в бесконечный цикл и выполнит бесконечное количество сетевых запросов. Добавляя этот второй аргумент (пустой массив), мы предотвращаем эту проблему.
В строке 17 мы используем console.log(posts) для отображения всех сообщений в консоли Chrome.
Делаем небольшую уборку
Как я уже упоминал ранее, ловушка useEffect - это ваш эквивалент методу жизненного цикла ComponentWillUnmount, в котором вы будете выполнять некоторую работу по очистке, например, удаление прослушивателей событий. Чтобы выполнить некоторую очистку с помощью ловушки useEffect, вы должны вернуть функцию очистки в функции обратного вызова, которую вы передаете в качестве первого аргумента ловушки useEffect. Ниже приведен пример, который поможет вам лучше понять, что я имею в виду.
То, что я упоминал ранее, проиллюстрировано между строками 16 и 18 приведенного выше фрагмента кода. В строке 17 вы будете выполнять работу по очистке.
Управление визуализацией и обновлениями
Ранее я упоминал, что ловушка useEffect работает очень похоже на ваш ComponentDidUpdate метод жизненного цикла. Обычно в ComponentDidUpdate вы будете сравнивать предыдущее состояние или свойства с текущим состоянием или свойствами компонента. Если они не совпадают, вы запустите некоторый код в рамках метода жизненного цикла.
С крючком useEffect мы можем сделать это очень легко. Помните второй аргумент, который мы можем передать ловушке useEffect? Раньше мы передавали пустой массив, но на самом деле мы можем передавать значения в массив. Если вы передадите значение (я) в массив, React проверит, изменилось ли какое-либо из этих значений. Если значения не изменились, React пропустит ловушку useEffect, но если любое из значений изменится, она будет использовать ловушку useEffect .
Я добавил к нашему компоненту переменную count (строка 6), а также кнопку, которая увеличит count на 1 (строка 22). Затем мы передали переменную count второму аргументу ловушки useEffect. Затем React будет следить за нашей переменной count на предмет любых изменений и запускать useEffect только тогда, когда обнаруживает изменение.
Если бы я нажал кнопку и увеличил переменную count на 1, React сравнит предыдущее значение с новым значением переменной count, и поскольку они разные
count = 0 //initial value count = 1 //After button click
он запустит ловушку useEffect и в нашем случае сделает сетевой запрос для сообщений.
Перехватчики React - очень интересный и, на мой взгляд, более чистый и лаконичный способ создания компонентов и внутренней логики. Спасибо, что прочитали мой блог, и я надеюсь, что вы лучше понимаете, как реализовать ловушку useEffect.
