Сравните useEffect, useLayoutEffect и useEffectEvent в React.

В этой статье давайте рассмотрим перехватчики извлечения данных React — useEffect, useLayoutEffect и useEffectEvent — сравнивая их функциональные возможности для эффективного развертывания приложений.

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

использованиеЭффект

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

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

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

импортировать React из «реагировать»; функция App() { const (data, setData) = React.useState(()); React.useEffect(() => { fetch(” “) .then((response) => response.json()) .then((data) => setData(data)); }, ()); return ( {data.map((item) => ( {item.title} ))} ); } экспортировать приложение по умолчанию;

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

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

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

1. «Дружелюбен» к асинхронной работе, что делает выборку данных более удобной.
2. Запустите после рендеринга компонента, убедившись, что перехватчик не блокирует пользовательский интерфейс.
3. Реализуйте очистку, вернув функцию.

использоватьLayoutEffect

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

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

импортировать React из «реагировать»; функция App() { const button = React.useRef(); React.useLayoutEffect(() => { const { width } = button.current.getBoundingClientRect(); button.current.style.width = `${width + 12}px`; }, ()); вернуться (Нажмите на меня); } экспортировать приложение по умолчанию;

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

Выдающиеся возможности хука useLayoutEffect

1. Синхронная реализация, способная блокировать пользовательский интерфейс, если операции внутри него тяжелы.
2. Лучший выбор для чтения и записи данных непосредственно в DOM.

useEffectEvent

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

Например:

импортировать React из «реагировать»; function App() { const Connect = (url) => { // логика подключения к URL }; const logConnection = (message, loginOptions) => { // логика регистрации сведений о соединении }; const onConnected = (url, loginOptions) => { logConnection(`Подключено к ${url}`, loginOptions); }; React.useEffect(() => { const device = Connect(url); device.onConnected(() => { onConnected(url); }); return () => { device.disconnect(); }; }, (url, onConnected)); возвращаться ; } экспортировать приложение по умолчанию;

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

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

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

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

импортировать React из «реагировать»; function App() { const Connect = (url) => { // логика подключения к URL }; const logConnection = (message, loginOptions) => { // логика регистрации сведений о соединении }; 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-адрес)); возвращаться ; } экспортировать приложение по умолчанию;

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

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

Особенности хука useEffectEvent

1. Лучше всего подходит для эффектов приложений, управляемых событиями.
2. Перехват useEffectEvent не работает с обработчиками событий, такими как onClick, onChange…

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

1. Получение данных: useEffect — отличный выбор.
2. Прямое манипулирование DOM: если вам нужно внести синхронные изменения в DOM перед перерисовкой, выберите useLayoutEffect.
3. Облегченные операции: для операций, которые не рискуют заблокировать пользовательский интерфейс, вы можете смело использовать useEffect.
4. Побочные эффекты, управляемые событиями: используйте ловушку useEffectEvent для инкапсуляции событий и ловушку useEffect для запуска побочных эффектов.

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

В приведенной выше статье вы познакомились со «Сравнением useEffect, useLayoutEffect и useEffectEvent в React». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!