En sammenligning av datahentingskroker i React

React-kroker er en kraftig måte å håndtere bivirkninger i React-komponenter på. Tre av de vanligste krokene for å håndtere bivirkninger er useEffect, useLayoutEffect og useEffectEvent. Hver krok har sitt unike bruksområde, så det er viktig å velge den rette for jobben.

UseEffect Hook

UseEffect-kroken er en grunnleggende krok i React som lar deg utføre bivirkninger som DOM-manipulasjon, asynkrone operasjoner og datahenting i funksjonelle komponenter. Denne kroken er en funksjon som tar to argumenter, effektfunksjonen og avhengighetsmatrisen.

Effektfunksjonen inneholder koden som utfører bivirkningen, og avhengighetsmatrisen bestemmer når effektfunksjonen kjører. Hvis avhengighetsmatrisen er tom, kjører effektfunksjonen bare én gang ved den første gjengivelsen av komponenten. Ellers kjører effektfunksjonen hver gang noen av verdiene i avhengighetsmatrisen endres.

Her er et eksempel på hvordan du bruker useEffect-kroken for å hente data:

 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;
 

Denne koden demonstrerer en app-komponent som henter data fra en ekstern API ved hjelp av useEffect-kroken. Effektfunksjonen til useEffect henter eksempeldata fra JSONPlaceholder API. Den analyserer deretter JSON-svaret og setter de hentede dataene til datatilstanden.

Med datatilstanden gjengir app-komponenten tittelegenskapen til hvert element i tilstanden.

Egenskaper ved brukenEffect Hook

• Asynkronvennlig: Den støtter asynkrone operasjoner innfødt, noe som gjør det praktisk for datahenting.
• Kjører etter gjengivelse: UseEffect-kroken utfører effektene etter at applikasjonen gjengir komponenten, og sikrer at kroken ikke blokkerer brukergrensesnittet.
• Opprydding: Det gir en integrert måte å utføre opprydding ved å returnere en funksjon. Dette kan være spesielt nyttig når du jobber med lyttere eller abonnementer.

UseLayoutEffect-kroken

UseLayoutEffect-kroken ligner på useEffect-kroken, men kjører synkront etter alle DOM-mutasjoner. Dette betyr at den kjører før nettleseren kan male skjermen, noe som gjør den egnet for oppgaver som krever presis kontroll over DOM-oppsettet og stiler, for eksempel å måle størrelsen på et element, endre størrelse på et element eller animere dets posisjon.

Nedenfor er et eksempel på hvordan du bruker useLayoutEffect-kroken til å endre bredden på et knappeelement:

 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;
 

Kodeblokken ovenfor øker bredden på knappeelementet med 12 piksler ved å bruke useLayoutEffect-kroken. Dette sikrer at knappebredden øker før knappen vises på skjermen.

Egenskaper for bruk LayoutEffect Hook

• Synkron: Den kjøres synkront, og blokkerer potensielt brukergrensesnittet hvis operasjonen i den er tung.
• DOM lese/skrive: Det er best egnet for lesing og skriving direkte til DOM, spesielt hvis du trenger endringene før nettleseren males på nytt.

UseEffectEvent Hook

useEffectEvent-kroken er en React-krok som løser avhengighetsproblemene til useEffect-kroken. Hvis du er kjent med useEffect, vet du at avhengighetsarrayen kan være vanskelig. Noen ganger må du legge inn flere verdier i avhengighetsmatrisen som er strengt nødvendige.

For eksempel:

 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;
 

Denne koden demonstrerer app-komponenten som administrerer en tilkobling til en ekstern tjeneste. Koblefunksjonen kobler til en spesifisert URL, mens logConnection-funksjonen logger tilkoblingsdetaljene. Til slutt kaller onConnected-funksjonen logConnection-funksjonen for å logge en vellykket tilkoblingsmelding når enheten kobles til.

useEffect-kroken kaller opp koble-funksjonen, og setter deretter opp en onConnected-tilbakeringingsfunksjon som skal utføres når enheten utløser onConnected-hendelsen. Denne tilbakeringingen logger en tilkoblingsmelding. Den returnerer en oppryddingsfunksjon som aktiveres når komponenten demonteres. Denne oppryddingsfunksjonen er ansvarlig for å koble fra enheten.

Avhengighetsmatrisen har url-variabelen og onConnected-funksjonen. App-komponenten vil opprette onConnected-funksjonen på hver gjengivelse. Dette vil føre til at useEffect-funksjonen kjøres på en sløyfe, som vil fortsette å gjengi app-komponenten på nytt.

Det er flere måter å løse useEffect-løkkeproblemet på. Likevel er den mest effektive måten å gjøre det på uten å legge til flere unødvendige verdier til avhengighetsmatrisen med useEffectEvent-kroken.

 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;
 

Ved å pakke onConnected-funksjonen med useEffectEvent-kroken, kan useEffectEvent-kroken alltid lese de siste verdiene til meldingen og loginOptions-parametere før den overføres til useEffect-kroken. Dette betyr at useEffect ikke trenger å stole på onConnected-funksjonen eller verdiene som sendes til den.

UseEffectEvent-kroken er nyttig når du vil at useEffect skal avhenge av en spesifikk verdi, selv om effekten utløser en hendelse som krever andre verdier som du foretrekker ikke å bruke som avhengigheter i useEffect.

Egenskaper for brukenEffectEvent Hook

• Det er best egnet for hendelsesdrevne bivirkninger.
• useEffectEvent-kroken fungerer ikke med hendelsesbehandlere som onClick, onChange, etc.

UseEffectEvent-kroken er fortsatt eksperimentell og utilgjengelig i React versjon 18-kroker.

Når skal du bruke hvilken krok?

Hver av de ovennevnte datahentingskrokene passer for forskjellige situasjoner:

• Henter data: UseEffect er et utmerket valg.
• Direkte DOM-manipulasjoner: Hvis du trenger å gjøre synkrone endringer i DOM før en ommaling, velg useLayoutEffect.
• Lette operasjoner: For operasjoner som ikke risikerer å blokkere brukergrensesnittet, kan du fritt bruke useEffect.
• Hendelsesdrevne bivirkninger: Bruk useEffectEvent-kroken til å pakke inn hendelsene og useEffect-kroken til å kjøre bivirkningene.

Håndter bivirkninger effektivt

React-krokene åpner opp en verden av muligheter, og å forstå forskjellen mellom useEffect, useLayoutEffect og useEffectEvent-krokene kan ha stor innvirkning på hvordan du håndterer bivirkninger og DOM-manipulasjon. Det er viktig å vurdere disse krokenes spesifikke krav og implikasjoner for å lage brukervennlige applikasjoner.