Поређење кукица за преузимање података у Реацт-у

by
Tweet
Share
Share
Pin

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

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

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

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

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

 import React from "react";
function App() {
  const [data, setData] = React.useState([]);
  React.useEffect(() => {
    fetch("<https://jsonplaceholder.typicode.com/posts>")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);
  return (
    <div className="app">
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}
export default App;

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

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

  Како инсталирати Синаптиц Пацкаге Манагер на Убунту

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

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

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

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

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

 import React from "react";
function App() {
  const button = React.useRef();
  React.useLayoutEffect(() => {
    const { width } = button.current.getBoundingClientRect();
    button.current.style.width = `${width + 12}px`;
  }, []);
  return (
    <div className="app">
      <button ref={button}>Click Me</button>
    </div>
  );
}
export default App;

Горњи блок кода повећава ширину елемента дугмета за 12 пиксела помоћу куке усеЛаиоутЕффецт. Ово осигурава да се ширина дугмета повећава пре него што се дугме прикаже на екрану.

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

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

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

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

  Како аутоматски организовати Гноме апликације у фасцикле апликација помоћу алата за поправљање апликација

На пример:

 import React from "react";
function App() {
  const connect = (url) => {
    
  };
  const logConnection = (message, loginOptions) => {
    
  };
  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>;
}
export default App;

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

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

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

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

 import React from "react";
function App() {
  const connect = (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]);
  return <div></div>;
}
export default App;

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

  Како да промените своје корисничко име и аватар за Гоогле Стадиа

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

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

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

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

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

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

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

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

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