UseEffect, useLayoutEffect и useEffectEvent: сравнение хуков выборки данных в React

Хуки React — мощный способ управления побочными эффектами в компонентах React. Три наиболее распространенных перехватчика для обработки побочных эффектов — это useEffect, useLayoutEffect и useEffectEvent. Каждый крючок имеет свой уникальный вариант использования, поэтому очень важно выбрать тот, который подходит для конкретной работы.

Хук useEffect

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

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

Вот пример использования перехватчика useEffect для получения данных:

import React from"react";
functionApp() {
const [data, setData] = React.useState([]);
 React.useEffect(() => {
 fetch("")
 .then((response) => response.json())
 .then((data) => setData(data));
 }, []);
return (

"app">
 {data.map((item) => (
{item.title}</div>
 ))}
 </div>
 );
}
exportdefault App;

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

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

Характеристики использования хука useEffect

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

Хук useLayoutEffect

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

Ниже приведен пример использования хука useLayoutEffect для изменения ширины объекта. кнопка элемент:

import React from"react";
functionApp() {
const button = React.useRef();
 React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
 button.current.style.width = `${width + 12}px`;
 }, []);
return (

"app">
Click Me</button>
 </div>
 );
}
exportdefault App;

Приведенный выше блок кода увеличивает ширину элемента кнопки на 12 пикселей с помощью перехватчика useLayoutEffect. Это гарантирует, что ширина кнопки увеличится до того, как она отобразится на экране.

Характеристики использования хука useLayoutEffect

• синхронный: он выполняется синхронно, потенциально блокируя пользовательский интерфейс, если операция внутри него тяжелая.
• DOM чтение/запись: лучше всего подходит для чтения и записи непосредственно в DOM, особенно если вам нужны изменения до перерисовки браузера.

Хук useEffectEvent

useEffectEvent Хук — это хук React, который решает проблемы зависимостей использованиеЭффект крюк. Если вы знакомы с useEffect, вы знаете, что его массив зависимостей может быть непростым. Иногда вам необходимо поместить в массив зависимостей больше значений, которые строго необходимы.

Например:

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the url
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = (url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 };
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url, onConnected]);
return<div>div>;
}
exportdefault App;

Этот код демонстрирует Приложение компонент, который управляет подключением к внешнему сервису. соединять функция подключается к указанному URL-адресу, а функция logConnection функция записывает детали соединения. Наконец, onConnected функция вызывает logConnection Функция регистрации сообщения об успешном подключении при подключении устройства.

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

Массив зависимостей имеет URL переменная и onConnected функция. Компонент App будет создавать функцию onConnected при каждом рендеринге. Это приведет к тому, что функция useEffect будет выполняться в цикле, который продолжит повторную отрисовку компонента приложения.

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

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the URL
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = React.useEffectEvent((url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 });
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url]);
return<div>div>;
}
exportdefault App;

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

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

Характеристики хука useEffectEvent

• Он лучше всего подходит для побочных эффектов, управляемых событиями.
• useEffectEvent перехватчик не работает с обработчиками событий, такими как по щелчку, по изменению, и т. д.

Хук useEffectEvent все еще является экспериментальным и недоступен в Хуки React версии 18.

Когда какой крючок использовать?

Каждый из вышеперечисленных перехватчиков выборки данных подходит для разных ситуаций:

• Получение данных: useEffect — отличный выбор.
• Прямые манипуляции с DOM: если вам нужно внести синхронные изменения в DOM перед перерисовкой, выберите useLayoutEffect.
• Легкие операции: для операций, которые не рискуют заблокировать пользовательский интерфейс, вы можете свободно использовать useEffect.
• Событийно-ориентированные побочные эффекты: используйте хук useEffectEvent для переноса событий и хук useEffect для запуска побочных эффектов.

Эффективно справляйтесь с побочными эффектами

Хуки React открывают целый мир возможностей, и понимание разницы между useEffect, Перехватчики useLayoutEffect и useEffectEvent могут существенно повлиять на то, как вы обрабатываете побочные эффекты и DOM. манипуляция. Для создания удобных для пользователя приложений важно учитывать конкретные требования и последствия этих перехватчиков.