УсеЕффецт, усеЛаиоутЕффецт и усеЕффецтЕвент: Поређење кукица за преузимање података у Реацт-у

Реацт куке су моћан начин управљања нежељеним ефектима у Реацт компонентама. Три најчешће куке за руковање нежељеним ефектима су усеЕффецт, усеЛаиоутЕффецт и усеЕффецтЕвент. Свака удица има свој јединствени случај употребе, тако да је одабир праве за посао од суштинског значаја.

УсеЕффецт Хоок

Тхе усеЕффецт кука је а фундаментална кука у Реацт-у који вам омогућава да извршите нежељене ефекте као што су ДОМ манипулација, асинхроне операције и преузимање података у функционалним компонентама. Ова кука је функција која узима два аргумента, функцију ефекта и низ зависности.

Функција ефекта садржи код који врши споредни ефекат, а низ зависности одређује када се функција ефекта покреће. Ако је низ зависности празан, функција ефекта се покреће само једном при почетном приказивању компоненте. У супротном, функција ефекта се покреће кад год се промени било која од вредности у низу зависности.

Ево примера како да користите усеЕффецт куку за преузимање података:

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;

Овај код демонстрира Апликација компонента која преузима податке из спољног АПИ-ја помоћу куке усеЕффецт. Функција ефекта усеЕффецт преузима узорке података из ЈСОНПлацехолдер АПИ-ја. Затим анализира ЈСОН одговор и поставља преузете податке на података држава.

Са стањем података, компонента апликације приказује наслов власништво сваке ставке у држави.

Карактеристике употребеЕффецт Хоок

• Асинхрони пријатељски: Нативно подржава асинхроне операције, што га чини погодним за преузимање података.
• Покреће се након рендеровања: усеЕффецт кука извршава своје ефекте након што апликација рендерује компоненту, обезбеђујући да кука не блокира кориснички интерфејс.
• Поспремити: Пружа интегрисани начин да се изврши чишћење враћањем функције. Ово може бити посебно корисно када радите са слушаоцима или претплатама.

УсеЛаиоутЕффецт Хоок

Тхе усеЛаиоутЕффецт кука је слична усеЕффецт кука, али ради синхроно након свих ДОМ мутација. То значи да се покреће пре него што претраживач може да слика екран, што га чини погодним за задатке који захтевају прецизност контролу над ДОМ изгледом и стиловима, као што је мерење величине елемента, промена величине елемента или анимација његовог положај.

Испод је пример како се користи усеЛаиоутЕффецт кука за промену ширине а дугме елемент:

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 пиксела помоћу куке усеЛаиоутЕффецт. Ово осигурава да се ширина дугмета повећава пре него што се дугме прикаже на екрану.

Карактеристике употребеЛаиоутЕффецт Хоок

• Синхрони: Извршава се синхроно, потенцијално блокирајући кориснички интерфејс ако је операција у њему тешка.
• ДОМ читање/писање: Најприкладнији је за читање и писање директно у ДОМ, посебно ако су вам потребне промене пре него што прегледач поново слика.

УсеЕффецтЕвент Хоок

Тхе усеЕффецтЕвент хоок је Реацт кука која решава проблеме зависности усеЕффецт кука. Ако сте упознати са усеЕффецт-ом, знате да његов низ зависности може бити тежак. Понекад морате ставити више вредности у низ зависности које су стриктно неопходне.

На пример:

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;

Овај код демонстрира Апликација компонента која управља везом са спољном услугом. Тхе повезати функција повезује са одређеним УРЛ-ом, док је логЦоннецтион функција бележи детаље везе. На крају, онЦоннецтед функција позива логЦоннецтион функција за евидентирање поруке о успешном повезивању када се уређај повеже.

УсеЕффецт кука позива функцију повезивања, а затим поставља онЦоннецтед функцију повратног позива да се изврши када уређај покреће догађај онЦоннецтед. Овај повратни позив бележи поруку о вези. Враћа функцију чишћења која се активира када се компонента искључи. Ова функција чишћења је одговорна за искључивање уређаја.

Низ зависности има урл променљива и онЦоннецтед функција. Компонента апликације ће креирати функцију онЦоннецтед на сваком рендеру. Ово ће узроковати покретање функције усеЕффецт у петљи, која ће наставити да поново приказује компоненту апликације.

Постоји више начина за решавање проблема усеЕффецт петље. Ипак, најефикаснији начин да то урадите без додавања више непотребних вредности вашем низу зависности је кука усеЕффецтЕвент.

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;

Обмотавањем функције онЦоннецтед са закачицом усеЕффецтЕвент, кука усеЕффецтЕвент увек може да прочита најновије вредности порука и логинОптионс параметара пре него што га проследи у усеЕффецт куку. То значи да усеЕффецт не мора да се ослања на онЦоннецтед функцију или вредности које су јој прослеђене.

УсеЕффецтЕвент кука је корисна када желите да ваш усеЕффецт зависи од одређене вредности, иако ефекат покреће догађај који захтева друге вредности које не желите да користите као зависности у усеЕффецт.

Карактеристике усеЕффецтЕвент Хоок-а

• Најприкладнији је за нежељене ефекте вођене догађајима.
• Тхе усеЕффецтЕвент кука не ради са обрађивачима догађаја као што је онЦлицк, онЦханге, итд.

УсеЕффецтЕвент кука је још увек експериментална и недоступна Реацт верзија 18 кука.

Када користити коју куку?

Свака од горе наведених кукица за преузимање података је погодна за различите ситуације:

• Преузимање података: УсеЕффецт је одличан избор.
• Директне ДОМ манипулације: Ако треба да извршите синхроне промене у ДОМ-у пре поновног фарбања, одлучите се за усеЛаиоутЕффецт.
• Лагане операције: За операције које не ризикују блокирање корисничког интерфејса, можете слободно користити усеЕффецт.
• Нежељени ефекти вођени догађајима: Користите закачицу усеЕффецтЕвент да премотате догађаје и усеЕффецт закачицу за покретање нежељених ефеката.

Ефикасно третирајте нежељене ефекте

Реацт куке отварају свет могућности и разумевање разлике између усеЕффецт-а, усеЛаиоутЕффецт и усеЕффецтЕвент куке могу значајно утицати на начин на који рукујете нежељеним ефектима и ДОМ-ом манипулација. Неопходно је узети у обзир специфичне захтеве и импликације ових кукица како би се направиле апликације прилагођене кориснику.