Learn React useEffect in 2024 (Plain & Simple)

Пришло время изучить эффект использования. Давайте посмотрим на следующий код. У нас есть два состояния: ` post ID` и `post`. Начальное состояние `post ID` равно `1`. У нас есть две кнопки для изменения значения `post ID`. Мы также отображаем содержимое поста, поскольку его начальное состояние не определено. Мы ничего не отображаем. Наша цель — вызывать API при каждом изменении `post ID` и отображать его на нашей странице. Вот здесь и пригодится эффект использования. Давайте добавим его в наш код. Эффект использования — это React Cook, который принимает два аргумента. Первый аргумент называется функцией `setTP`, второй — массивом зависимостей, и он необязателен. Сейчас, когда я обновляю страницу, мы видим блокировку консоли. В режиме разработки React вызывает функцию настройки эффекта использования дважды для целей отладки. Эффект использования работает немного иначе, чем обычная функция JavaScript. Если мы добавим одну блокировку консоли перед эффектом использования и одну после него, какой будет порядок вызовов? Когда я обновляю страницу, мы видим, что до и после эффекта использования сначала появляются сообщения в консоли. Это связано с жизненным циклом компонентов React. React сначала рендерит весь компонент, а затем вызывает функцию настройки эффекта использования. Мы сказали, что массив зависимостей необязателен. Что произойдет, если мы... Удалите его каждый раз, когда я обновляю состояние. Функция настройки вызывается обычно, но это не то, что нам нужно. Если мы оставим массив пустым, это означает, что эта функция будет вызываться только при первоначальной отрисовке. Мы видим сообщение в консоли только один раз, даже если состояние ID поста меняется. Если мы добавим элемент в массив зависимостей, функция будет вызываться только при изменении этого значения. Когда я нажимаю кнопку, новые сообщения в консоли не появляются, потому что мы не меняем состояние поста, а меняем состояние ID поста. Давайте изменим пост на ID поста. Теперь, когда я нажимаю кнопку, мы видим сообщения в консоли. Давайте вызовем API всякий раз, когда изменяется ID поста. Сначала замените сообщение в консоли на fetch. Мы будем использовать сервис DJSON. Когда мы получаем данные, мы сначала преобразуем их в JSON, а затем выводим в консоль. Когда я обновляю страницу, мы видим продукт в консоли. Сейчас, когда я меняю ID поста, мы все еще получаем тот же продукт. Это потому, что мы всегда получаем первый продукт. Давайте сделаем его динамическим с помощью шаблонной строки. Теперь каждый раз, когда я нажимаю кнопку «Далее», в консоли появляется другой продукт. Наконец, нам нужно использовать функцию setPost, чтобы продукт отображался на странице. Как видите, всякий раз, когда изменяется ID записи, мы получаем товар и отображаем его на экране. Теперь, когда мы разобрались с основами, давайте рассмотрим некоторые продвинутые моменты. Если STIN установлен в вашем проекте, при удалении ID записи из массива зависимостей вы увидите предупреждение о том, что ID записи необходимо поместить в массив зависимостей, поскольку мы обращаемся к нему в нашей функции setup. Рассмотрим другой пример: мы извлекаем наш базовый URL и помещаем его в переменную. Когда мы наводим курсор на массив зависимостей, появляется сообщение о том, что базовый URL отсутствует. Мы можем скрыть эту ошибку, нажав «Быстрое исправление», а затем отключив эту строку. Однако это не самый предпочтительный способ скрывать предупреждения. Более глубокая проблема заключается в том, что у нас есть константа в нашем компоненте. Лучший способ избавиться от этого предупреждения — переместить базовый URL за пределы компонента. Будьте осторожны при использовании эффекта use, иначе вы можете создать бесконечный цикл. Давайте рассмотрим следующий пример: у нас есть новое состояние под названием is to mode, его значение по умолчанию — false. Мы обновляем его состояние, нажимая эту кнопку. При обновлении мы хотим увеличить ID записи на пять, однако что-то не так с нашим эффектом use. Можете ли вы это обнаружить? Я нажимаю кнопку и вижу ошибку "Превышен максимальный уровень обновления" в консоли. Это происходит потому, что мы создали бесконечный цикл в нашем эффекте использования. Когда мы устанавливаем турбо-режим в true, эффект использования запускается, затем вызывается метод setPostID. Когда вызывается setPostID, значение PostID изменяется, поскольку PostID указан в массиве зависимостей, эффект использования запускается снова. Это продолжается бесконечно, пока наше приложение не зависнет. Есть простой способ это исправить, как мы узнали из моего предыдущего видео: мы можем использовать функцию обновления. При использовании функции обновления нам не нужно добавлять PostID в наш массив зависимостей, в результате эффект использования будет запускаться только при изменении турбо-режима. До этого момента я не говорил об одной хитрости эффекта использования — функции очистки. Давайте посмотрим на наш пример. В нашей функции настройки мы можем вернуть другую функцию. Эта функция называется функцией очистки. Она вызывается непосредственно перед следующим рендерингом. Когда я нажимаю кнопку, сначала вызывается наша функция очистки с предыдущим PostID, затем вызывается наша следующая функция настройки с обновленным PostID. Но где следует использовать эту функцию очистки? Чтобы понять это, давайте посмотрим на следующий пример. У нас есть состояние ` isvisible` и кнопка. Кнопка переключает состояние `isvisible`. Если `isvisible` установлено, мы отображаем компонент таймера. Давайте посмотрим на компонент таймера. У нас есть состояние `Time`, и оно отображается на странице. У нас также есть функция пользовательского эффекта, и её зависимый массив пуст. Это означает, что функция `setup` вызывается только один раз. Мы вызываем внутреннюю функцию `set`, которая увеличивает время на одну секунду. В этом коде есть проблема. Можете ли вы её обнаружить? Когда я нажимаю кнопку переключения таймера, мы видим, что время увеличивается на два каждую секунду. Когда я уничтожаю компонент, мы видим, что функция `setIntegration` всё ещё работает. Это приводит к утечке памяти, что плохо сказывается на производительности. Давайте исправим это, добавив функцию очистки в нашу функцию очистки. Мы вызываем `clearIntegration`. Когда этот компонент уничтожается, он

больше не будет вызывать функцию внутри ` setIntegration`. Теперь, когда я нажимаю кнопку, мы видим, что время увеличивается на единицу. Когда я нажимаю ещё раз, чтобы уничтожить компонент, мы больше не видим, чтобы функция `setIntegration` работала. С этим кодом вы должны уверенно использовать пользовательские эффекты в своих компонентах. Если у вас есть вопрос, оставьте комментарий и не забудьте подписаться, у меня их три. Спасибо за просмотр!