Учебник React useEffect для начинающих с реальными примерами и шаблонами повседневного использования.

В этой статье вы узнаете, как легко использовать ловушку useEffect в проектах кодирования. Вы поймете параметры useEffect, как заменить жизненный цикл componentDidMount () хуком useEffect и многое другое. Я также добавил различные шаблоны использования хука useEffect.

Предположим, вам нужно получить набор данных из базы данных и использовать их для заполнения вашего приложения React. Или вам нужно изменить заголовок страницы или выполнить некоторые манипуляции с DOM при загрузке страницы. Вы можете использовать ловушку useEffect, чтобы сделать это легко.

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



Изучите React useState Hook
с примерами и упражнениями levelup.gitconnected.com



Перехватчики React представили метод useEffect() для замены жизненных циклов компонентов класса.

Параметры useEffect

Хук useEffect принимает функцию в качестве первого аргумента и набор зависимостей в качестве второго аргумента.

React.useEffect(function, [dependencies])

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

Какие побочные эффекты?

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

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

Если вы знакомы с жизненными циклами реакции, которые использовались внутри компонентов класса, ловушка useEffect может использоваться как жизненные циклы componentDidMount, componentDidUpdate и componentWillUnmount.

Начнем с импорта хука useEffect



Почему старшие разработчики не смотрят видео о клонах Facebook и ускоренные курсы, подобные нам
Чем больше вы смотрите, тем меньше вы узнаете - суровая правда medium.com



Импортируйте эффект Hook

сначала вам нужно импортировать хук эффекта, как показано ниже.

import React, { useState, useEffect } from 'react';

Образец кода

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
 
useEffect(() => {    
document.title = `You clicked ${count} times`;  
});
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Выше приведен очень простой пример, чтобы понять функциональность useEffect.

Здесь происходит то, что реагирует на изменение заголовка документа после первоначального рендеринга. Таким образом, после каждого рендеринга будет запускаться ловушка useEffect и менять заголовок.

Когда вызывается перехватчик useEffect в React?

Представьте, что человек щелкнул по реагирующей веб-странице.

  • Сначала React считывает значения состояния и подготавливает пользовательский интерфейс.
  • Визуализируйте результаты JSX как HTML.
  • Передайте и зафиксируйте результаты в DOM
  • Браузер создает представление на экране
  • React вызывает useEffect для запуска

Используется ли useEffect Run на каждом рендере?

Да, по умолчанию перехватчик useEffect запускается при каждом рендеринге. Но мы можем это изменить.

Мы можем изменить useEffect так, чтобы он запускался только при определенных изменениях. Например, мы можем вызвать useEffect только при изменении определенного значения. Это улучшит производительность нашего приложения (поскольку уменьшит нежелательные вызовы useEffect). Для этого мы можем передать массив в качестве второго аргумента useEffect

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

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

Если счетчик изменится с 1 до ›2, useEffect запустится снова после рендеринга, в противном случае useEffect не будет выполняться.

Давайте посмотрим еще несколько способов использования хука useEffect.

Различные шаблоны / варианты использования

  • useEffect Один раз на каждом компоненте Mounts.
  • useEffect На каждом компоненте Render.
  • useEffect При рендеринге каждого компонента с условием.
  • useEffect Когда компонент отключается.

Что такое монтирование, рендеринг, повторный рендеринг

Монтаж происходит, когда реагирует на рендеринг компонента в первый раз. При монтировании строится исходная модель DOM.

Рендеринг - это то, что происходит каждый раз при вызове функционального компонента. Он создает набор инструкций для создания модели DOM.

Повторный рендеринг - это когда React вызывает уже смонтированный компонент, чтобы получить новый набор инструкций для построения DOM.

При установке компонента

К этому времени вы уже знаете, что такое монтаж компонентов. Монтаж компонентов происходит только один раз. Таким образом, мы можем запустить useEffect только один раз.
Просто передав пустой массив в качестве второго аргумента ловушки useEffect, мы можем заставить useEffect запускаться только один раз при монтировании компонента.

При рендеринге каждого компонента

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

При рендеринге компонентов в зависимости от условий

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

Когда компонент отключается

В React есть два типа реализаций useEffect. Эффекты, требующие очистки, и эффекты, не требующие очистки.

Очистить ??

Да, очистка - это что-то вроде закрытия крана после использования. В противном случае вода протекает без использования. В React это называется утечкой памяти.

Подумайте, что мы подписались на API, чтобы получить какие-то данные. После использования API мы должны отказаться от подписки.

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

Таким образом, мы можем делать такие же чистки в хуке useEffect.

Просто добавив оператор return к хуку useEffect, мы можем выполнить очистку. Эта функция возврата запускается после размонтирования компонента.

Наконец-то

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



Руководство по обратным вызовам JavaScript для новичков
Изучите А – Я обратных вызовов с реальными образцами кода проекта. javascript.plainenglish.io



Больше контента на plainenglish.io