PÔhjalik juhend React useEffecti kohta, mis hÔlmab kÔrvalmÔjude haldamist, puhastusmustreid ja parimaid praktikaid jÔudluspÔhiste ja hooldatavate Reacti rakenduste loomiseks.
React useEffect: kÔrvalmÔjude ja puhastusmustrite valdamine
useEffect on peamine Reacti Hook, mis vÔimaldab teil funktsionaalsetes komponentides kÔrvalmÔjusid teostada. Selle tÔhusa kasutamise mÔistmine on oluline robustsete ja hooldatavate Reacti rakenduste loomiseks. See pÔhjalik juhend uurib useEffecti peensusi, hÔlmates erinevaid kÔrvalmÔjude stsenaariume, puhastusmustreid ja parimaid praktikaid.
Mis on kÔrvalmÔjud?
Reacti kontekstis on kÔrvalmÔju igasugune operatsioon, mis suhtleb vÀlismaailmaga vÔi muudab midagi vÀljaspool komponendi ulatust. Levinud nÀited on:
- Andmete toomine: API-kÔnede tegemine andmete saamiseks serverist.
- DOM-i manipuleerimine: Otse DOM-i muutmine (kuigi React soosib deklaratiivseid uuendusi).
- Tellimuste seadistamine: SĂŒndmustele vĂ”i vĂ€listele andmeallikatele tellimine.
- Taimerite kasutamine:
setTimeouti vĂ”isetIntervali seadistamine. - Logimine: Konsooli kirjutamine vĂ”i andmete saatmine analĂŒĂŒtikateenustele.
- Otse brauseri API-dega suhtlemine: NĂ€iteks
localStorage'ile juurdepÀÀsemine vÔi geolokatsiooni API kasutamine.
Reacti komponendid on loodud olema puhtad funktsioonid, mis tÀhendab, et nad peaksid alati sama sisendi (prop'id ja olek) korral andma sama vÀljundi. KÔrvalmÔjud rikuvad seda puhtust, kuna nad vÔivad tuua kaasa ettearvamatu kÀitumise ning muuta komponente raskemini testitavaks ja mÔistetavaks. useEffect pakub kontrollitud viisi nende kÔrvalmÔjude haldamiseks.
useEffect Hook'i mÔistmine
useEffect Hook vÔtab kaks argumenti:
- Funktsioon, mis sisaldab koodi, mis tuleb kÔrvalmÔjuna kÀivitada.
- Valikuline sÔltuvuste massiiv.
PĂ”hisĂŒntaks:
useEffect(() => {
// KÔrvalmÔju kood siin
}, [/* SÔltuvuste massiiv */]);
SÔltuvuste massiiv
SÔltuvuste massiiv on kriitilise tÀhtsusega kontrollimaks, millal efektifunktsioon kÀivitatakse. See on vÀÀrtuste (tavaliselt prop'ide vÔi olekumuutujate) massiiv, millest efekt sÔltub. useEffect kÀivitab efektifunktsiooni ainult siis, kui mÔni vÀÀrtus sÔltuvuste massiivis on viimase renderdamise jÀrel muutunud.
Levinud sÔltuvuste massiivi stsenaariumid:
- TĂŒhi sĂ”ltuvuste massiiv (
[]): Efekt kĂ€ivitub ainult ĂŒks kord, pĂ€rast esialgset renderdamist. Seda kasutatakse sageli lĂ€htestamisĂŒlesannete jaoks, nĂ€iteks andmete toomiseks komponendi paigaldamisel. - SĂ”ltuvuste massiiv vÀÀrtustega (
[prop1, state1]): Efekt kÀivitub iga kord, kui mÔni mÀÀratud sÔltuvus muutub. See on kasulik prop'ide vÔi oleku muutustele reageerimiseks ja komponendi vastavaks uuendamiseks. - SÔltuvuste massiivi puudumine (
undefined): Efekt kĂ€ivitub pĂ€rast iga renderdamist. Seda ĂŒldiselt ei soovitata, kuna see vĂ”ib pĂ”hjustada jĂ”udlusprobleeme ja lĂ”pmatuid tsĂŒkleid, kui seda hoolikalt ei kĂ€sitleta.
Levinud useEffecti mustrid ja nÀited
1. Andmete toomine
Andmete toomine on ĂŒks levinumaid useEffecti kasutusjuhtumeid. Siin on nĂ€ide kasutajaandmete toomisest API-st:
import React, { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
setLoading(true);
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) {
throw new Error(`HTTP viga! staatus: ${response.status}`);
}
const data = await response.json();
setUser(data);
} catch (e) {
setError(e);
} finally {
setLoading(false);
}
}
fetchData();
}, [userId]);
if (loading) return Laen kasutaja andmeid...
;
if (error) return Viga: {error.message}
;
if (!user) return Kasutaja andmed pole saadaval.
;
return (
{user.name}
E-post: {user.email}
Asukoht: {user.location}
);
}
export default UserProfile;
Selgitus:
useEffecthook'i kasutatakse kasutajaandmete toomiseks, kuiuserIdprop muutub.- SÔltuvuste massiiv on
[userId], seega efekt kÀivitatakse uuesti iga kord, kuiuserIdprop'i uuendatakse. - Funktsioon
fetchDataonasyncfunktsioon, mis teeb API-kÔne, kasutadesfetchi. - VeakÀsitlus on lisatud, kasutades
try...catchplokki. - Laadimise ja vea olekuid kasutatakse kasutajale sobivate teadete kuvamiseks.
2. Tellimuste ja sĂŒndmuste kuulajate seadistamine
useEffect on kasulik ka vĂ€listele andmeallikatele tellimuste vĂ”i sĂŒndmuste kuulajate seadistamiseks. On ĂŒlioluline need tellimused komponendi eemaldamisel puhastada, et vĂ€ltida mĂ€lulekkeid.
import React, { useState, useEffect } from 'react';
function OnlineStatus() {
const [isOnline, setIsOnline] = useState(navigator.onLine);
useEffect(() => {
function handleStatusChange() {
setIsOnline(navigator.onLine);
}
window.addEventListener('online', handleStatusChange);
window.addEventListener('offline', handleStatusChange);
// Puhastusfunktsioon
return () => {
window.removeEventListener('online', handleStatusChange);
window.removeEventListener('offline', handleStatusChange);
};
}, []);
return (
Olete hetkel: {isOnline ? 'VÔrgus' : 'VÔrgust vÀljas'}
);
}
export default OnlineStatus;
Selgitus:
useEffecthook seadistab sĂŒndmuste kuulajadonlinejaofflinesĂŒndmuste jaoks.- SĂ”ltuvuste massiiv on
[], seega efekt kĂ€ivitub ainult ĂŒks kord komponendi paigaldamisel. - Puhastusfunktsioon (mis tagastatakse efektifunktsioonist) eemaldab sĂŒndmuste kuulajad komponendi eemaldamisel.
3. Taimerite kasutamine
Taimereid, nagu setTimeout ja setInterval, saab samuti hallata useEffecti abil. JĂ€llegi on oluline taimer komponendi eemaldamisel tĂŒhistada, et vĂ€ltida mĂ€lulekkeid.
import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setCount((prevCount) => prevCount + 1);
}, 1000);
// Puhastusfunktsioon
return () => {
clearInterval(intervalId);
};
}, []);
return (
Aega möödas: {count} sekundit
);
}
export default Timer;
Selgitus:
useEffecthook seadistab intervalli, mis suurendabcountolekut iga sekundi jÀrel.- SÔltuvuste massiiv on
[], seega efekt kĂ€ivitub ainult ĂŒks kord komponendi paigaldamisel. - Puhastusfunktsioon (mis tagastatakse efektifunktsioonist) tĂŒhistab intervalli komponendi eemaldamisel.
4. Otse DOM-i manipuleerimine
Kuigi React soosib deklaratiivseid uuendusi, vÔib esineda olukordi, kus peate otse DOM-i manipuleerima. useEffecti saab sel eesmÀrgil kasutada, kuid seda tuleks teha ettevaatlikult. Kaaluge esmalt alternatiive nagu ref'id.
import React, { useRef, useEffect } from 'react';
function FocusInput() {
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return (
);
}
export default FocusInput;
Selgitus:
useRefhook'i kasutatakse sisendelemendi jaoks ref'i loomiseks.useEffecthook fokuseerib sisendelemendi pÀrast esialgset renderdamist.- SÔltuvuste massiiv on
[], seega efekt kĂ€ivitub ainult ĂŒks kord komponendi paigaldamisel.
Puhastusfunktsioonid: mÀlulekete vÀltimine
Ăks olulisemaid aspekte useEffecti kasutamisel on puhastusfunktsiooni mĂ”istmine. Puhastusfunktsioon on funktsioon, mis tagastatakse efektifunktsioonist. See kĂ€ivitatakse, kui komponent eemaldatakse vĂ”i enne efektifunktsiooni uuesti kĂ€ivitamist (kui sĂ”ltuvused on muutunud).
Puhastusfunktsiooni peamine eesmĂ€rk on vĂ€ltida mĂ€lulekkeid. MĂ€lulekked tekivad siis, kui ressursse (nagu sĂŒndmuste kuulajad, taimerid vĂ”i tellimused) ei vabastata korralikult, kui neid enam ei vajata. See vĂ”ib pĂ”hjustada jĂ”udlusprobleeme ja rasketel juhtudel rakenduse kokkujooksmist.
Millal kasutada puhastusfunktsioone
Peaksite alati kasutama puhastusfunktsiooni, kui teie efektifunktsioon teeb mÔnda jÀrgmistest:
- Seadistab tellimusi vÀlistele andmeallikatele.
- Lisab sĂŒndmuste kuulajaid aknale vĂ”i dokumendile.
- Kasutab taimereid (
setTimeoutvÔisetInterval). - Muudab otse DOM-i.
Kuidas puhastusfunktsioonid töötavad
Puhastusfunktsioon kÀivitatakse jÀrgmistes stsenaariumides:
- Komponendi eemaldamine: Kui komponent eemaldatakse DOM-ist.
- Efekti uuesti kÀivitamine: Enne efektifunktsiooni uuesti kÀivitamist sÔltuvuste muutuste tÔttu. See tagab, et eelmine efekt on korralikult puhastatud enne uue efekti kÀivitamist.
Puhastusfunktsiooni nÀide (uuesti vaadatud)
Vaatame uuesti varasemat OnlineStatus nÀidet:
import React, { useState, useEffect } from 'react';
function OnlineStatus() {
const [isOnline, setIsOnline] = useState(navigator.onLine);
useEffect(() => {
function handleStatusChange() {
setIsOnline(navigator.onLine);
}
window.addEventListener('online', handleStatusChange);
window.addEventListener('offline', handleStatusChange);
// Puhastusfunktsioon
return () => {
window.removeEventListener('online', handleStatusChange);
window.removeEventListener('offline', handleStatusChange);
};
}, []);
return (
Olete hetkel: {isOnline ? 'VÔrgus' : 'VÔrgust vÀljas'}
);
}
export default OnlineStatus;
Selles nĂ€ites eemaldab puhastusfunktsioon sĂŒndmuste kuulajad, mis lisati efektifunktsioonis. See vĂ€ldib mĂ€lulekkeid, tagades, et sĂŒndmuste kuulajad ei ole enam aktiivsed, kui komponent eemaldatakse vĂ”i kui efekt tuleb uuesti kĂ€ivitada.
useEffecti kasutamise parimad praktikad
Siin on mÔned parimad praktikad, mida useEffecti kasutamisel jÀrgida:
- Hoidke efektid fookuses: Iga
useEffectpeaks vastutama ĂŒhe, hĂ€sti mÀÀratletud kĂ”rvalmĂ”ju eest. VĂ€ltige mitme mitteseotud kĂ”rvalmĂ”ju kombineerimist ĂŒhteuseEffecti. See muudab teie koodi modulaarsemaks, testitavamaks ja lihtsamini mĂ”istetavaks. - Kasutage sĂ”ltuvuste massiive targalt: Kaaluge hoolikalt iga
useEffecti sĂ”ltuvusi. Mittevajalike sĂ”ltuvuste lisamine vĂ”ib pĂ”hjustada efekti sagedasemat kĂ€ivitamist kui vaja, mis viib jĂ”udlusprobleemideni. Vajalike sĂ”ltuvuste vĂ€ljajĂ€tmine vĂ”ib pĂ”hjustada efekti mittekĂ€ivitumist, kui see peaks, mis viib ootamatu kĂ€itumiseni. - Puhastage alati: Kui teie efektifunktsioon seadistab ressursse (nagu sĂŒndmuste kuulajad, taimerid vĂ”i tellimused), pakkuge alati puhastusfunktsioon nende ressursside vabastamiseks, kui komponent eemaldatakse vĂ”i kui efekt tuleb uuesti kĂ€ivitada. See vĂ€ldib mĂ€lulekkeid.
- VĂ€ltige lĂ”pmatuid tsĂŒkleid: Olge ettevaatlik oleku uuendamisel
useEffecti sees. Kui oleku uuendamine pĂ”hjustab efekti uuesti kĂ€ivitumise, vĂ”ib see viia lĂ”pmatu tsĂŒklini. Selle vĂ€ltimiseks veenduge, et oleku uuendamine on tingimuslik vĂ”i et sĂ”ltuvused on Ă”igesti konfigureeritud. - Kaaluge useCallbacki kasutamist sĂ”ltuvusfunktsioonide jaoks: Kui edastate funktsiooni
useEffectile sÔltuvusena, kaaluge funktsiooni meeldejÀtmiseksuseCallbacki kasutamist. See takistab funktsiooni uuesti loomist igal renderdamisel, mis vÔib pÔhjustada efekti asjatut uuesti kÀivitamist. - Eraldage keeruline loogika: Kui teie
useEffectsisaldab keerulist loogikat, kaaluge selle eraldamist eraldi funktsiooni vÔi kohandatud Hook'i. See muudab teie koodi loetavamaks ja hooldatavamaks. - Testige oma efekte: Kirjutage teste, et tagada oma efektide korrektne toimimine ja et puhastusfunktsioonid vabastavad ressursid korralikult.
useEffecti tÀiustatud tehnikad
1. useRefi kasutamine vÀÀrtuste sÀilitamiseks renderduste vahel
MÔnikord on vaja sÀilitada vÀÀrtust renderduste vahel, ilma et see pÔhjustaks komponendi uuesti renderdamist. useRefi saab sel eesmÀrgil kasutada. NÀiteks saate useRefi abil salvestada prop'i vÔi olekumuutuja eelmise vÀÀrtuse.
import React, { useState, useEffect, useRef } from 'react';
function PreviousValue({ value }) {
const previousValue = useRef(null);
useEffect(() => {
previousValue.current = value;
}, [value]);
return (
Praegune vÀÀrtus: {value}, Eelmine vÀÀrtus: {previousValue.current}
);
}
export default PreviousValue;
Selgitus:
useRefhook'i kasutatakse ref'i loomiseksvalueprop'i eelmise vÀÀrtuse salvestamiseks.useEffecthook uuendab ref'i iga kord, kuivalueprop muutub.- Komponent ei renderdu uuesti, kui ref'i uuendatakse, kuna ref'id ei kÀivita uuesti renderdamist.
2. Debounce'imine ja throttle'imine
Debounce'imine ja throttle'imine on tehnikad, mida kasutatakse funktsiooni kĂ€ivitamise sageduse piiramiseks. See vĂ”ib olla kasulik jĂ”udluse parandamiseks, kui kĂ€sitletakse sageli kĂ€ivituvaid sĂŒndmusi, nagu scroll vĂ”i resize sĂŒndmused. useEffecti saab kasutada koos kohandatud hook'idega, et implementeerida debounce'imist ja throttle'imist Reacti komponentides.
3. Kohandatud Hook'ide loomine korduvkasutatavate efektide jaoks
Kui leiate end kasutamas sama useEffecti loogikat mitmes komponendis, kaaluge selle loogika kapseldamiseks kohandatud Hook'i loomist. See soodustab koodi korduvkasutust ja muudab teie komponendid lĂŒhemaks.
NÀiteks vÔite luua kohandatud Hook'i andmete toomiseks API-st:
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
setLoading(true);
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP viga! staatus: ${response.status}`);
}
const data = await response.json();
setData(data);
} catch (e) {
setError(e);
} finally {
setLoading(false);
}
}
fetchData();
}, [url]);
return { data, loading, error };
}
export default useFetch;
SeejÀrel saate seda kohandatud Hook'i oma komponentides kasutada:
import React from 'react';
import useFetch from './useFetch';
function UserProfile({ userId }) {
const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`);
if (loading) return Laen kasutaja andmeid...
;
if (error) return Viga: {error.message}
;
if (!user) return Kasutaja andmed pole saadaval.
;
return (
{user.name}
E-post: {user.email}
Asukoht: {user.location}
);
}
export default UserProfile;
Levinud lÔksud, mida vÀltida
- Puhastusfunktsioonide unustamine: See on kÔige levinum viga. Puhastage alati ressursid, et vÀltida mÀlulekkeid.
- Asjatud uuesti kÀivitamised: Veenduge, et sÔltuvuste massiivid on optimeeritud, et vÀltida asjatuid efektide kÀivitamisi.
- Juhuslikud lĂ”pmatud tsĂŒklid: Olge ÀÀrmiselt ettevaatlik oleku uuendustega
useEffecti sees. Kontrollige tingimusi ja sÔltuvusi. - Linteri hoiatuste ignoreerimine: Linterid annavad sageli kasulikke hoiatusi puuduvate sÔltuvuste vÔi potentsiaalsete probleemide kohta
useEffecti kasutamisel. Pöörake neile hoiatustele tÀhelepanu ja tegelege nendega.
Globaalsed kaalutlused useEffecti kohta
Arendades Reacti rakendusi globaalsele publikule, arvestage jÀrgmisega, kui kasutate useEffecti andmete toomiseks vÔi vÀliste API-dega suhtlemiseks:
- API lÔpp-punktid ja andmete lokaliseerimine: Veenduge, et teie API lÔpp-punktid on loodud erinevate keelte ja piirkondade kÀsitlemiseks. Kaaluge lokaliseeritud sisu edastamiseks sisuedastusvÔrgu (CDN) kasutamist.
- KuupÀeva ja kellaaja vormindamine: Kasutage rahvusvahelistamise teeke (nt
IntlAPI vÔi teegid nagumoment.js, kuid kaaluge vÀiksemate pakettide suuruste jaoks alternatiive nagudate-fns), et vormindada kuupÀevi ja kellaaegu vastavalt kasutaja lokaadile. - Valuuta vormindamine: Samamoodi kasutage rahvusvahelistamise teeke valuutade vormindamiseks vastavalt kasutaja lokaadile.
- Arvude vormindamine: Kasutage erinevate piirkondade jaoks sobivat arvuvormingut (nt komakohad, tuhandete eraldajad).
- Ajavööndid: KÀsitsege ajavööndite teisendusi korrektselt, kui kuvate kuupÀevi ja kellaaegu kasutajatele erinevates ajavööndites.
- VeakÀsitlus: Pakkuge informatiivseid veateateid kasutaja keeles.
KuupÀeva lokaliseerimise nÀide:
import React, { useState, useEffect } from 'react';
function LocalizedDate() {
const [date, setDate] = useState(new Date());
useEffect(() => {
const timer = setInterval(() => {
setDate(new Date());
}, 1000);
return () => clearInterval(timer);
}, []);
const formattedDate = date.toLocaleDateString(undefined, {
year: 'numeric',
month: 'long',
day: 'numeric',
});
return Praegune kuupÀev: {formattedDate}
;
}
export default LocalizedDate;
Selles nĂ€ites kasutatakse toLocaleDateStringi kuupĂ€eva vormindamiseks vastavalt kasutaja lokaadile. Argument undefined ĂŒtleb funktsioonile, et see kasutaks kasutaja brauseri vaikelokaati.
KokkuvÔte
useEffect on vÔimas tööriist kÔrvalmÔjude haldamiseks Reacti funktsionaalsetes komponentides. MÔistes erinevaid mustreid ja parimaid praktikaid, saate kirjutada jÔudlusvÔimelisemaid, hooldatavamaid ja robustsemaid Reacti rakendusi. Pidage meeles, et alati tuleb oma efektid puhastada, kasutada sÔltuvuste massiive targalt ja kaaluda korduvkasutatava loogika jaoks kohandatud Hook'ide loomist. Neile detailidele tÀhelepanu pöörates saate useEffecti meisterlikult valdama ja looma hÀmmastavaid kasutajakogemusi globaalsele publikule.