UseEffect, useLayoutEffect и useEffectEvent: Сравнение на куките за извличане на данни в React

React куките са мощен начин за управление на страничните ефекти в компонентите на React. Три от най-често срещаните кукички за обработка на странични ефекти са useEffect, useLayoutEffect и useEffectEvent. Всяка кука има свой уникален случай на употреба, така че изборът на правилната за работата е от съществено значение.

Куката useEffect

The useEffect куката е a фундаментална кука в 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 извлича примерни данни от JSONPlaceholder API. След това анализира JSON отговора и задава извлечените данни на данни състояние.

Със състоянието на данните компонентът на приложението изобразява заглавие собственост на всеки артикул в държавата.

Характеристики на useEffect Hook

• Асинхронно приятелски: Поддържа естествено асинхронни операции, което го прави удобен за извличане на данни.
• Изпълнява се след изобразяване: Куката useEffect изпълнява своите ефекти, след като приложението изобрази компонента, като гарантира, че куката не блокира потребителския интерфейс.
• Почисти: Предоставя интегриран начин за извършване на почистване чрез връщане на функция. Това може да бъде особено полезно при работа със слушатели или абонаменти.

Куката useLayoutEffect

The useLayoutEffect куката е подобна на useEffect кука, но работи синхронно след всички DOM мутации. Това означава, че той се изпълнява преди браузърът да може да рисува екрана, което го прави подходящ за задачи, които изискват прецизност контрол върху оформлението и стиловете на DOM, като например измерване на размера на елемент, преоразмеряване на елемент или анимиране на позиция.

По-долу е даден пример как да използвате куката useLayoutEffect, за да промените ширината на a бутон елемент:

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 Hook

• Синхронен: Изпълнява се синхронно, като потенциално блокира потребителския интерфейс, ако операцията в него е тежка.
• Четене/запис на DOM: Той е най-подходящ за четене и писане директно в DOM, особено ако имате нужда от промените, преди браузърът да прерисува.

Куката useEffectEvent

The useEffectEvent hook е React hook, който решава проблемите със зависимостите на useEffect кука. Ако сте запознати с 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;

Този код демонстрира Приложение компонент, който управлява връзка с външна услуга. The свържете се функцията се свързва с определен 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 може винаги да чете най-новите стойности на съобщение и loginOptions параметри, преди да го предадете на куката useEffect. Това означава, че useEffect не трябва да разчита на функцията onConnected или стойностите, предадени към нея.

Куката useEffectEvent е полезна, когато искате вашият useEffect да зависи от конкретна стойност, въпреки че ефект задейства събитие, което изисква други стойности, които предпочитате да не използвате като зависимости в useEffect.

Характеристики на useEffectEvent Hook

• Той е най-подходящ за странични ефекти, предизвикани от събития.
• The useEffectEvent hook не работи с манипулатори на събития като onClick, onChangeи т.н.

Куката useEffectEvent все още е експериментална и не е налична в React версия 18 куки.

Кога да използвате коя кука?

Всяка от горните кукички за извличане на данни е подходяща за различни ситуации:

• Извличане на данни: useEffect е отличен избор.
• Директни DOM манипулации: Ако трябва да направите синхронни промени в DOM преди повторно рисуване, изберете useLayoutEffect.
• Леки операции: За операции, които не рискуват да блокират потребителския интерфейс, можете свободно да използвате useEffect.
• Странични ефекти, предизвикани от събития: Използвайте куката useEffectEvent за обвиване на събитията и куката useEffect за стартиране на страничните ефекти.

Справете се ефективно със страничните ефекти

Куките на React отварят свят от възможности и разбирането на разликата между useEffect, useLayoutEffect и useEffectEvent куките могат значително да повлияят на начина, по който се справяте със страничните ефекти и DOM манипулация. От съществено значение е да се вземат предвид специфичните изисквания и последици на тези куки, за да се направят удобни за потребителя приложения.