Nëse jeni një zhvillues i React që nuk keni mësuar ende rreth grepave të React, tani është momenti. Ky postim do të kalojë në detaje UseEffect React Hook. Është ekuivalenti i grepit të një thike të ushtrisë zvicerane. Ai zgjidh një sërë çështjesh, si për shembull si të merrni të dhëna kur montohet një komponent, si të ekzekutoni kodin kur ndryshon një gjendje ose një mbështetëse, si të vendosni kohëmatësit ose intervalet, etj.
Një useEffect përdoret për pothuajse çdo gjë që dëshironi të "bëni" në një komponent React që nuk po kthen JSX (çdo lloj efekti anësor). Ju gjithashtu mund të keni disa UseEffects për komponent.
E gjithë kjo fuqi vjen me një kosto: nëse nuk e kuptoni se si funksionon, mund të jetë hutuese. Në këtë postim, ne do të shikojmë një sërë shembujsh në mënyrë që të mund të kapni modelin konceptual dhe ta zbatoni atë në kodin tuaj.
Reagoni grepa – Çfarë po përpiqet të zgjidhë?
Hooks u prezantuan për herë të parë në versionin React 16.8 dhe tani përdoren nga shumë projekte React. Hooks kapërcen problemin e përsëritjes së kodit midis komponentëve. Ato janë shkruar pa përdorimin e klasave. Kjo nuk do të thotë që React po braktis klasat; grepa janë thjesht një metodë alternative.
React ju lejon të krijoni shpejt komponentë të sofistikuar me logjikë të gjendjes. Është e vështirë të ndash këta komponentë pasi klasa mbështetet në Metodat e ciklit jetësor React. Këtu hyjnë React Hooks.
Ato ju lejojnë të ndani një komponent në funksione më të vogla. Në vend që ta ndani kodin në pjesë më të vogla bazuar në metodat e ciklit jetësor, tani mund të organizoni dhe ndani kodin në njësi më të vogla në varësi të funksionalitetit.
Çfarë është useEffect Hook?
Hooks janë funksione që ju lejojnë të aksesoni gjendjen dhe aftësitë e tjera të reagimit pa pasur nevojë të shkruani klasa ES6. React hooks API ka një goditje të quajtur useEffect. Nëse jeni njohur me ciklet e jetës react, grepa useEffect është e njëjtë me komponentDidMount, komponentDidUpdatedhe komponenti do të çmontohet metodat e ciklit jetësor të kombinuara.
Sipas dokumentacionit të React Hooks, ai u krijua për të zgjidhur disa nga problemet me metodat e ciklit jetësor të komponentit të klasës ES6.
sintaksë
Argumenti i parë është një funksion kthimi i thirrjes, i cili ekzekutohet si parazgjedhje pas çdo paraqitjeje. Parametri i dytë është një grup opsional i varësisë që udhëzon Hook-in të kthejë thirrjen vetëm nëse ndryshon gjendja e synuar.
Hook krahason gjendjen historike dhe aktuale të secilës varësi. Nëse dy vlerat nuk përputhen, Hook thërret kthimin e thirrjes të specifikuar në parametrin e parë. Vargjet e varësisë ndryshojnë sjelljen e zakonshme të kthimit të thirrjes dhe garantojnë që Hook injoron të gjithë komponentët e tjerë në sferën e komponentit.
Përdorimi bazë
Për të ruajtur një mesazh, po përdor React useState në mostrën e kodit të mësipërm. Pas kësaj, marr variablin e gjendjes së mesazhit tim dhe e printoj në ekran. Megjithatë, tani dua të përdor Effect për të modifikuar mesazhin një sekondë pasi komponenti të jetë montuar.
E kam futur efektin tim pas linjës useState pas importimit të useEffect nga korniza React. Parametri i parë për të përdorurEffect është një funksion. Kur ky mbajtës funksioni të ekzekutohet, ai do të kujdeset për çdo efekt anësor që ju ofroni. Funksioni është një funksion kthimi i thirrjes që thirret kur ndodh një nga ngjarjet e ciklit jetësor të komponentit React.
Kur ta përdorni?
Hook useEffect mund të jetë i dobishëm në një sërë situatash. Më poshtë janë më të rëndësishmet:
- Ne mund ta ndryshojmë këtë parametër nga ana e klientit kur dëshirojmë të marrim të dhëna në varësi të një argumenti të dhënë. Ai do të tërhiqet pasi parametri të jetë përditësuar me të dhëna të reja.
- Nëse duam të marrim të dhëna nga një pikë fundore API dhe t'i shfaqim ato në anën e klientit. Kur komponenti ynë jepet, funksioni ose mbajtësi i dhënë në grepin useEffect ekzekutohet dhe të dhënat në gjendjet e komponentit merren. Këto statuse përdoren më pas në komponentët e ndërfaqes së përdoruesit.
- Kur komponenti juaj mbështetet në të dhëna nga bota e jashtme dhe ne nuk mund të sigurohemi që të dhënat do të vijnë, ne duhet të përdorimEffect (ndoshta serveri është atje poshtë). Në vend që të hidhni probleme dhe të parandaloni shfaqjen e komponentëve të tjerë, vendosini ato në grepin useEffect.
Rastet e përdorimit
Nëse komponenti riprodhohet pas ekzekutimit të parë, ai nuk do të ekzekutohet.
Sa herë që një komponent renderohet ose ri-renderrohet, ai duhet të ekzekutohet gjithmonë.
Si parazgjedhje, programi funksionon vetëm një herë. Më pas, nëse vlerat mbështetëse ndryshojnë, ekzekutoni:
Për aktivitetet asinkrone, përdorni gjithmonë useEffect.
Blloqet e kodit useEffect janë shënues të dukshëm të punëve asinkrone për zhvilluesit e tjerë. Është e mundur të krijohet kodi asinkron pa përdorur useEffect, por kjo nuk është "metoda React" dhe rrit kompleksitetin dhe rrezikun e gabimeve.
Përdorimi i useEffect në vend të shkrimit të kodit asinkron që mund të ndalojë UI-në është një teknikë e njohur në komunitetin React, veçanërisht mënyra se si ekipi React e ka ndërtuar atë për të kryer një efekt anësor.
Një avantazh tjetër i përdorimit të tij është se zhvilluesit thjesht mund të rishikojnë kodin dhe të zbulojnë menjëherë kodin që ekzekutohet "jashtë rrjedhës së kontrollit", i cili bëhet i rëndësishëm vetëm pas ciklit të parë të paraqitjes. Për më tepër, blloqet janë të përshtatshme për nxjerrje në grepa me porosi të ripërdorshme dhe akoma më semantike.
Nje shembull
Duke përdorur kodin useEffect, rritni një numër për sekondë.
Përfundim
Të kuptuarit e parimeve themelore të dizajnit dhe praktikave më të mira të useEffect Hook, për mendimin tim, është një aftësi kritike për të mësuar nëse doni të bëheni një zhvillues i nivelit tjetër të React.
Për ta përmbledhur, useEffect Hook merr një funksion që përfshin logjikën e plotë të domosdoshme, potencialisht të efektit. Vargu i varësisë, i cili është parametri i dytë, mund të përdoret për të ndikuar në ekzekutim. Ndërsa merreni me të, është gjithashtu e nevojshme të shkruani kodin e pastrimit duke përdorur funksionin e kthimit.
Na tregoni në komente nëse artikulli ishte i dobishëm.
Lini një Përgjigju