Reacționează useEffect() Hook: utilizare, cum și când să-l folosești

Introducere în Hook useEffect().

useeffect hook o componentă cheie.Se ocupă de sarcini precum preluarea datelor, configurarea ascultătorilor de evenimente sau modificarea DOM și permite utilizatorilor să efectueze efecte secundare folosind componente funcționale. De asemenea, controlează ciclul de viață al componentelor.

Cârliguluseeffect folosește două argumente, o funcție și o matrice opțională de dependență.Funcția transmisă ca prim argument este executată după randarea inițială a componentei și apoi din nou după fiecare actualizare. Puteți indica variabilele de care depinde un efect folosind matricea de dependențe. O nouă rulare a efectului este efectuată dacă oricare dintre variabilele matricei de dependență se modifică.

În mod inerent,cârligul useeffect a fost creat pentru a face față provocărilor cu care se confruntă în timpul ciclului de viață al componentelor clasei ES6.Cu toate acestea, a devenit acum unul dintre conceptele de bază de reacție.

Cu acest rezumat desprece este useeffect în react , să ne uităm acum la sintaxa acestuia.

Sintaxa de bază pentru useEffect() Hook

useEffect acceptă două argumente ; al doilea argument este opțional. Sintaxa este următoarea:

useEffect(<funcție>, <dependență>)

Funcția include logica efectelor secundare. Provoacă executarea unui apel invers direct după actualizarea DOM.

Dependența conține o matrice opțională de dependențe ale efectelor secundare, adică valorile de stare și props. Rețineți căhook-ul cu efect de utilizare rulează apel invers numai dacă dependențele s-au schimbat în timpul redărilor.

Sintaxa servește scopului solitar al useEffect(). Vă permite să plasați logica efectelor secundare în interiorul funcției de apel invers și apoi să utilizați argumentul dependențe pentru a controla când trebuie să rulați efectul secundar.

Puteți lua în considerare următoarea sintaxă atunci când implementați useEffect() Hook:

// import useEffect

import { useEffect } din 'react';

function MyComponent() {

// îl numește deasupra JSX-ului returnat

// îi transmite două argumente, adică un tablou și o funcție

useEffect(() => {

// funcția efect

return () => {

// funcția de curățare

};

}, [/* matrice de dependențe */]);

// logica de redare a componentelor

}

}

Consultațicursurile noastre gratuite de tehnologiepentru a obține un avantaj față de concurență.

Montarea și demontarea componentelor cu useEffect() Hook

Montare

Etapa inițială a ciclului de viață al unei componente React implică crearea și inserarea componentelor în DOM. Această etapă a ciclului de viață a efectului de utilizare react include metoda ciclului de viață componentDidMount, care se execută atunci când componenta se montează.

Iată un exemplu de montare a componentelor folosind cârligul useEffect().

componentDidMount() {

console.log(„Componenta este montată cu succes”);

this.setState({

încărcat: adevărat

})

}

În exemplul de mai sus, componentDidMount vă permite să utilizați setState. Deci, puteți seta și modifica cu ușurință starea în metoda ciclului de viață. Metoda corespunzătoare folosește apeluri API, apelează puncte finale de la distanță și preia date.

Demontarea

Această metodă a ciclului de viață react useeffect gestionează curățarea într-un DOM.Este ca ofuncție de curățare useeffect care elimină o componentă din DOM.Se numește demontare în React. Demontarea utilizează o singură metodă ciclului de viață, adică componentWillUnmount. Este apelat atunci când doriți să eliminați o componentă din DOM.

componentWillUnmount() {

console.log(„Componenta a fost demontată cu succes”);

}

Utilizarea Hook effect() pentru gestionarea modificărilor de stare

Useeffectul se execută după fiecare randare.Este, de asemenea, folosit pentru a rula anumite coduri pentru a confirma o schimbare de stare. Puteți controla timpul de execuție a efectului trecând al doilea argument în useEffect() Hook. Al doilea argument funcționează ca o matrice de dependențe, adică dacă variabilele corespunzătoare sunt modificate, efectul trebuie reluat. Rețineți că starea este unul dintre tipurile de variabile.

Următoarea secțiune ilustrează un exemplu pentru a explica modul în carecârligul de efect de utilizare gestionează schimbările de stare.

De exemplu, este posibil să doriți să executați un efect secundar bazat pe o valoare „zi”. Să presupunem că aveți un efect secundar de a afișa un mesaj de salut în funcție de valoarea zilei. Valoarea zilei este salvată într-o variabilă de stare.

Ori de câte ori alegi o zi, statul este actualizat. Modificarea valorii stării vă permite să actualizați mesajul de salut. Ar trebui să treceți variabila de stare la useEffect hook ca subset al matricei de dependențe.

useEffect(() =>

{

// Efect secundar

}, [stat]);

În exemplul de mai sus de useeffect react native , efectul secundar ar rula dacă valoarea variabilei de stare se actualizează.

Explorați cursurile noastre populare de inginerie software

Folosind useEffect() Hook cu API-uri și solicitări de rețea

Puteți utiliza cârligul „useEffect()” cu API-uri și solicitări de rețea pentru a prelua date de pe un server și a gestiona erorile. Iată un exemplu despre cum să utilizați „useEffect()” cu un API și să gestionați erorile de rețea:

import React, { useState, useEffect } din 'react';

function MyComponent() {

const [date, setData] = useState(null);

const [eroare, setError] = useState(null);

useEffect(() => {

funcția asincronă fetchData() {

încerca {

const response = await fetch('https://api.example.com/data');

dacă (!răspuns.ok) {

throw new Error('Răspunsul rețelei nu a fost ok');

}

const json = await response.json();

setData(json);

} captură (eroare) {

setError(eroare);

}

}

fetchData();

}, []);

dacă (eroare) {

return <div>Eroare: {error.message}</div>;

}

dacă (!date) {

return <div>Se încarcă...</div>;

}

întoarcere (

<div>

<p>{data.message}</p>

</div>

);

}

Puteți modifica acest exemplu pentru a include orice funcționalitate suplimentară de care aveți nevoie pentru a gestiona solicitările de rețea și răspunsurile API.

Tehnici avansate de utilizare Effect() Hook

Una dintre tehnicile native de reacții cu efect de utilizare avansate este memorarea.Este o tehnică de optimizare în care rezultatul unui apel de funcție este stocat în cache. Ulterior,funcția de returnare useeffect îl returnează atunci când aceeași intrare este alimentată din nou.

O altă tehnică binecunoscută useEffect() Hook este useMemo Hook. Vă permite să calculați o valoare și să o memorați. Sintaxa sa este:

import { useMemo } din „react”

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

dependențe de cârlig useEffect().

Dependențe useEffect() Hook conțin o listă de dependențe ale efectului secundar, cuprinzând și valori de stare sau prop. Argumentul dependențe vă permite să capturați unele evenimente ale ciclului de viață al componentei, cum ar fi montarea unei componente sau actualizarea unei anumite stări/valoare de prop.

Argumentul dependențe vă permite să controlați timpul în care este invocat efectul secundar, indiferent de ciclul de randare al componentei.

Redare condiționată cu useEffect() Hook

useEffect Hook vă permite să puneți condițiile în cârlig. Iată un exemplu.

useEffect(() => {

dacă (ar trebui să Execute) {

// (lista de condiții)

}

}, [souldExecute])

Trebuie să menționați condițiile obligatorii pe care doriți să le executați în funcția shouldExecute.

folosește efect() Hook vs ComponentDidMount() și ComponentDidUpdate()

useEffect() Hook vs componentDidUpdate():

useEffect() Hook vs componentDidMount():

Greșeli obișnuite și cele mai bune practici cu useEffect() Hook.

Greșeli comune

1. Nedefinirea dependențelor

useEffect rulează ori de câte ori este redată o componentă. Prin urmare, trebuie să definiți valorile care trebuie să declanșeze o re-rendare. În caz contrar, funcția ta useEffect poate crea probleme de performanță.

2. Nu se curăță după executarea cârligului useEffect

useEffect poate returna o funcție de curățare care se execută atunci când componenta este demontată. Necurățarea după useEffect poate crea scurgeri de memorie și alte probleme. Deci, este important să utilizați funcția de curățare useeffect .

3. Utilizarea setState în funcția useEffect fără o dependență

Dacă actualizați starea în useEffect, aceasta declanșează o altă randare. Acest lucru poate duce la o buclă infinită. Pentru a preveni acest lucru, trebuie să definiți întotdeauna variabila de stare pe care o actualizați ca dependență într-un hook useEffect.

Explorați cursurile noastre gratuite de dezvoltare software

Cele mai bune practici:

• Dacă doriți să utilizați cârligul useEffect, asigurați-vă că utilizați doar unul pentru fiecare componentă. În cazul mai multor cârlige useEffect, toate ar rula ori de câte ori se redă o componentă. Deci, poate crea probleme de performanță și comportament neașteptat.
• Asigurați-vă că nu utilizați cârligul useEffect în interiorul condițiilor, buclelor sau funcțiilor imbricate. Dacă utilizați State inside for bucla, atunci React va crea o nouă variabilă de stare de fiecare dată când rulează bucla. Astfel, duce la un comportament neașteptat.
• Asigurați-vă că nu folosiți excesiv cârligul useEffect. Acestea pot face codul dvs. dificil de citit și pot influența performanța dacă sunt folosite excesiv.
• Trebuie să apelați numai cârligul useEffect din funcțiile React. Dacă îl apelați dintr-o componentă de clasă, veți vedea o eroare.

Concluzie

Cel mai bine este să utilizați useeffect în react dacă doriți să accesați cu ușurință elementele de recuzită și starea componentelor fără a scrie niciun cod suplimentar.Simplifica semnificativ efectele secundare ale componentelor, deoarece face mai usoara executarea efectelor secundare atunci cand se schimba starea sau prop. Puteți lua în considerare aspectele și cele mai bune practici discutate mai sus pentru a vă asigura că componentele dvs. React funcționează optim.

Învățarea abilităților solicitante de dezvoltare software este crucială în epoca actuală. Vă puteți echipa cu aceste abilități de ultimă oră, urmând Masterul în Științe în Informatică al lui upGrad de la LJMU . Cursul te face un dezvoltator de software expert, oferind abilități precum Java, Python și specializare în domenii conexe. Învățarea temeinică a aspectelor abordate în acest curs vă ajută să explorați oportunități de angajare, cum ar fi dezvoltator javascript, inginer software și inginer backend.

Pe lângă stăpânirea abilităților de dezvoltare software, upGrad vă ajută, de asemenea, să vă îmbunătățiți cariera de dezvoltator full-stack prin cursuri precum Executive PG Program in Full Stack Development de la IIITB și Full Stack Software Development Bootcamp . Aceste programe oferă platforme de învățare captivante care le permit candidaților să dobândească abilități solicitante de dezvoltare completă și să deschidă în mod eficient calea către o carieră de succes!