Ja esat React izstrādātājs, kurš vēl nav iemācījies par React āķiem, tagad ir īstais brīdis. Šajā rakstā tiks detalizēti apskatīts useEffect React Hook. Tas ir Šveices armijas naža āķa ekvivalents. Tas atrisina dažādas problēmas, piemēram, kā iegūt datus, kad komponents tiek pievienots, kā palaist kodu, kad mainās stāvoklis vai rekvizīts, kā iestatīt taimerus vai intervālus utt.
UseEffect tiek izmantots gandrīz visam, ko vēlaties “darīt” React komponentā, kas neatgriež JSX (jebkāda veida blakusefektu). Katram komponentam var būt arī vairāki lietošanas efekti.
Visa šī jauda ir par maksu: ja vien jūs nesaprotat, kā tas darbojas, tas var būt mulsinoši. Šajā ziņojumā mēs apskatīsim dažādus piemērus, lai jūs varētu aptvert konceptuālo modeli un piemērot to savam kodam.
Reakcijas āķi – Ko tā cenšas atrisināt?
Āķi pirmo reizi tika ieviesti React versijā 16.8, un tagad tos izmanto daudzi React projekti. Hooks pārvar koda atkārtošanās problēmu starp komponentiem. Tie ir rakstīti, neizmantojot klases. Tas nenozīmē, ka React pamet nodarbības; āķi ir vienkārši alternatīva metode.
React ļauj ātri izveidot sarežģītus komponentus ar stāvokļu loģiku. Šos komponentus ir grūti nodalīt, jo klase balstās uz React dzīves cikla metodēm. Šeit parādās React Hooks.
Tie ļauj sadalīt komponentu mazākās funkcijās. Tā vietā, lai sadalītu kodu mazākās daļās, pamatojoties uz dzīves cikla metodēm, tagad varat sakārtot un atdalīt kodu mazākās vienībās atkarībā no funkcionalitātes.
Kas ir useEffect Hook?
Āķi ir funkcijas, kas ļauj piekļūt stāvokļa un citām reaģēšanas iespējām, nerakstot ES6 klases. React hooks API ir āķis ar nosaukumu useEffect. Ja esat iepazinies ar reakcijas dzīves cikliem, useEffect āķis ir tāds pats kā komponentsDidMount, komponentsDidUpdate, un komponentsWillUnmount apvienotas dzīves cikla metodes.
Saskaņā ar React Hooks dokumentāciju, tas tika izveidots, lai atrisinātu dažas problēmas ar ES6 klases komponentu dzīves cikla metodēm.
sintakse
Pirmais arguments ir atzvanīšanas funkcija, kas pēc noklusējuma tiek izpildīta pēc katras renderēšanas. Otrais parametrs ir neobligāts atkarības masīvs, kas uzdod āķim atzvanīt tikai tad, ja mainās mērķa stāvoklis.
Āķis salīdzina katras atkarības vēsturisko un pašreizējo stāvokli. Ja abas vērtības nesakrīt, āķis izsauc pirmajā parametrā norādīto atzvanīšanu. Atkarības masīvi maina parasto atzvanīšanas uzvedību un garantē, ka Hook ignorē visus pārējos komponentu darbības jomas komponentus.
Pamata lietojums
Lai saglabātu ziņojumu, iepriekš esošajā koda paraugā izmantoju React useState. Pēc tam es paņemu ziņojuma stāvokļa mainīgo un izdrukāju to uz ekrāna. Tomēr tagad es vēlos izmantot UseEffect, lai modificētu ziņojumu sekundi pēc komponenta uzstādīšanas.
Esmu ievietojis savu efektu aiz rindiņas useState pēc useEffect importēšanas no React ietvara. Pirmais parametrs useEffect ir funkcija. Kad šis funkciju apdarinātājs tiks izpildīts, tas parūpēsies par visām jūsu sniegtajām blakusparādībām. Funkcija ir atzvanīšanas funkcija, kas tiek izsaukta, kad notiek kāds no React komponenta dzīves cikla notikumiem.
Kad to izmantot?
UseEffect āķis var būt noderīgs dažādās situācijās. Vissvarīgākie ir šādi:
- Mēs varam mainīt šo parametru no klienta puses, kad vēlamies iegūt datus atkarībā no iesniegtā argumenta. Tas tiks atsaukts pēc parametra atjaunināšanas ar jauniem datiem.
- Ja mēs vēlamies izgūt datus no API galapunkta un parādīt tos klienta pusē. Kad mūsu komponents tiek renderēts, tiek izpildīta funkcija vai apdarinātājs, kas piešķirts useEffect āķim, un tiek izgūti dati komponenta stāvokļos. Šie statusi pēc tam tiek izmantoti lietotāja interfeisa komponentos.
- Ja jūsu komponents paļaujas uz datiem no ārpasaules un mēs nevaram nodrošināt, ka dati tiks saņemti, mums vajadzētu izmantotEffect (iespējams, serveris atrodas tur apakšā). Tā vietā, lai radītu problēmas un novērstu citu komponentu parādīšanu, ievietojiet tos useEffect āķī.
Lietošanas gadījumi
Ja komponents tiek atkārtoti renderēts pēc pirmās palaišanas, tas netiks izpildīts.
Ikreiz, kad komponents tiek renderēts vai atkārtoti renderēts, tas vienmēr ir jāizpilda.
Pēc noklusējuma programma darbojas tikai vienu reizi. Pēc tam, ja balsta vērtības mainās, palaidiet:
Asinhronām darbībām vienmēr izmantojiet useEffect.
UseEffect kodu bloki ir acīmredzami asinhrono darbu marķieri jūsu kolēģiem izstrādātājiem. Ir iespējams izveidot asinhronu kodu, neizmantojot useEffect, taču šī nav “React metode”, un tas palielina gan sarežģītību, gan kļūdu risku.
UseEffect izmantošana asinhrona koda rakstīšanas vietā, kas var apturēt lietotāja saskarni, ir labi zināms paņēmiens React kopienā, jo īpaši veids, kā React komanda to ir izveidojusi, lai radītu blakus efektu.
Vēl viena tās izmantošanas priekšrocība ir tā, ka izstrādātāji var vienkārši pārskatīt kodu un nekavējoties noteikt kodu, kas tiek palaists “ārpus kontroles plūsmas”, kas kļūst svarīgs tikai pēc pirmā renderēšanas cikla. Turklāt bloki ir piemēroti ekstrakcijai atkārtoti lietojamos un vēl semantiskos pielāgotos āķos.
Piemērs
Izmantojot kodu useEffect, palieliniet skaitli sekundē.
Secinājumi
Manuprāt, izpratne par useEffect Hook dizaina pamatprincipiem un paraugpraksi ir ļoti svarīga prasme, kas jāapgūst, ja vēlaties kļūt par nākamā līmeņa React izstrādātāju.
Rezumējot, useEffect Hook saņem funkciju, kas ietver obligātu, potenciāli efekta pilnu loģiku. Atkarības masīvu, kas ir otrais parametrs, var izmantot, lai ietekmētu izpildi. Strādājot ar to, ir nepieciešams arī ierakstīt tīrīšanas kodu, izmantojot atgriešanas funkciju.
Paziņojiet mums komentāros, vai raksts bija noderīgs.
Atstāj atbildi