Хук React useEffect(): использование, как и когда использовать

Знакомство с хуком useEffect()

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

Хукuseeffect использует два аргумента, функцию и необязательный массив зависимостей.Функция, переданная в качестве первого аргумента, выполняется после начального рендеринга компонента, а затем снова после каждого обновления. Вы можете указать переменные, от которых зависит эффект, используя массив зависимостей. Новый запуск эффекта выполняется при изменении любой из переменных массива зависимостей.

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

После краткого описания того,что такое useeffect в реакции , давайте теперь посмотрим на его синтаксис.

Основной синтаксис хука useEffect()

useEffect поддерживает два аргумента ; второй аргумент является необязательным. Синтаксис следующий:

useEffect(<функция>, <зависимость>)

Функция включает логику побочных эффектов. Это провоцирует выполнение обратного вызова сразу после обновления DOM.

Зависимость содержит необязательный массив зависимостей ваших побочных эффектов, то есть значения состояния и свойств. Обратите внимание, чтохук use effect запускает обратный вызов, только если зависимости изменились во время рендеринга.

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

Вы можете использовать следующий синтаксис при реализации хука useEffect():

// импортировать эффект использования

импортировать {useEffect} из «реагировать»;

функция МойКомпонент() {

// вызывает его над возвращенным JSX

// передает ему два аргумента, т.е. массив и функцию

использоватьЭффект(() => {

// функция эффекта

возврат () => {

// функция очистки

};

}, [/* массив зависимостей */]);

// логика отрисовки компонента

}

}

Ознакомьтесь с нашимибесплатными технологическими курсами, чтобы получить преимущество над конкурентами.

Монтирование и размонтирование компонентов с помощью хука useEffect()

Монтаж

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

Вот пример монтирования компонентов с использованием хука useEffect().

компонентDidMount () {

console.log("Компонент успешно смонтирован");

это.setState({

загружено: правда

})

}

В приведенном выше примере componentDidMount позволяет вам использовать setState. Таким образом, вы можете легко установить и изменить состояние в методе жизненного цикла. Соответствующий метод использует вызовы API, вызывает удаленные конечные точки и извлекает данные.

Размонтирование

Этот метод жизненного цикла реакции useeffect обрабатывает очистку в DOM.Это похоже нафункцию очистки useeffect , которая удаляет компонент из DOM.В React это называется размонтированием. При размонтировании используется только один метод жизненного цикла, т. е. componentWillUnmount. Он вызывается, когда вы хотите удалить компонент из DOM.

компонентWillUnmount () {

console.log("Компонент успешно размонтирован");

}

Использование хука use effect() для обработки изменений состояния

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

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

Например, вы можете захотеть запустить побочный эффект на основе значения «день». Предположим, у вас есть побочный эффект для отображения приветственного сообщения в зависимости от значения дня. Значение дня сохраняется в переменной состояния.

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

использовать эффект (() =>

{

// Побочный эффект

}, [состояние]);

В приведенном выше примере useeffect react native побочный эффект запускается, если значение переменной состояния обновляется.

Изучите наши популярные курсы по программной инженерии

Использование хука useEffect() с API и сетевыми запросами

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

импортировать React, {useState, useEffect} из 'реагировать';

функция МойКомпонент() {

const [данные, setData] = useState (null);

const [ошибка, setError] = useState (null);

использоватьЭффект(() => {

асинхронная функция fetchData() {

пытаться {

const response = await fetch('https://api.example.com/data');

если (!response.ok) {

throw new Error('Сетевой ответ не в порядке');

}

const json = ожидание ответа.json();

установитьДанные (JSON);

} поймать (ошибка) {

установитьError(ошибка);

}

}

выборка данных();

}, []);

если (ошибка) {

вернуть <div>Ошибка: {error.message}</div>;

}

если (!данные) {

return <div>Загрузка…</div>;

}

возвращаться (

<дел>

<p>{data.message}</p>

</div>

);

}

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

Продвинутые техники хуков useEffect()

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

Еще одна известная техника хука useEffect() — это хук useMemo. Это позволяет вам рассчитать значение и запомнить его. Его синтаксис:

импортировать {useMemo} из «реагировать»

const memoizedValue = useMemo(() => calculateExpensiveValue(x, y), [x, y])

Зависимости хуков useEffect()

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

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

Условный рендеринг с хуком useEffect()

useEffect Hook позволяет помещать условия в хук. Вот пример.

использоватьЭффект(() => {

если (следует выполнить) {

// (список условий)

}

}, [следует выполнить])

Вам нужно указать обязательные условия, которые вы хотите выполнить в функции shouldExecute.

использовать эффект() Hook против ComponentDidMount() и ComponentDidUpdate()

Хук useEffect() против componentDidUpdate():

Хук useEffect() против componentDidMount():

Распространенные ошибки и лучшие практики использования хука useEffect().

Распространенные ошибки

1. Не определяя зависимости

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

2. Отсутствие очистки после выполнения хука useEffect

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

3. Использование setState в функции useEffect без зависимости

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

Изучите наши бесплатные курсы по разработке программного обеспечения

Лучшие практики:

• Если вы хотите использовать хук useEffect, убедитесь, что используете только один хук для каждого компонента. В случае нескольких хуков useEffect все они будут запускаться при каждом рендеринге компонента. Таким образом, это может создать проблемы с производительностью и неожиданное поведение.
• Не используйте хук useEffect внутри условий, циклов или вложенных функций. Если вы используете состояние внутри цикла for, то React будет создавать новую переменную состояния каждый раз, когда цикл запускается. Таким образом, это приводит к неожиданному поведению.
• Не злоупотребляйте хуком useEffect. Они могут затруднить чтение вашего кода и могут повлиять на производительность, если их использовать слишком часто.
• Вы должны вызывать хук useEffect только из функций React. Если вы вызовете его из компонента класса, вы увидите ошибку.

Заключение

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

Изучение сложных навыков разработки программного обеспечения имеет решающее значение в нынешнюю эпоху. Вы можете вооружиться этими передовыми навыками, получив степень магистра наук в области компьютерных наук в LJMU . Курс делает вас опытным разработчиком программного обеспечения, передавая такие навыки, как Java, Python и специализацию в смежных областях. Тщательное изучение аспектов, затронутых в этом курсе, поможет вам изучить возможности трудоустройства, такие как разработчик javascript, инженер-программист и бэкэнд-инженер.

Помимо овладения навыками разработки программного обеспечения, upGrad также помогает вам подняться по карьерной лестнице в качестве разработчика полного стека с помощью таких курсов, как Executive PG Program in Full Stack Development от IIITB и Full Stack Software Development Bootcamp . Эти программы предоставляют иммерсивные обучающие платформы, которые позволяют кандидатам приобретать требуемые навыки комплексного развития и эффективно прокладывать путь к успешной карьере!