Kung ikaw usa ka developer sa React nga wala pa nakakat-on bahin sa React hooks, karon na ang higayon. Kini nga post moagi sa paggamitEffect React Hook sa detalye. Kini ang kaw-it nga katumbas sa kutsilyo sa Swiss Army. Gisulbad niini ang lainlaing mga isyu, sama sa kung giunsa pagkuha ang datos kung ang usa ka sangkap nag-mount, kung giunsa ang pagpadagan sa code kung ang usa ka estado o usa ka prop mausab, kung giunsa ang pag-set up sa mga timer o mga agwat, ug uban pa.
Ang usa ka useEffect kay gigamit para sa bisan unsa nga gusto nimo "buhaton" sa usa ka React component nga wala magbalik sa JSX (bisan unsang klase sa side effect). Mahimo ka usab adunay daghang mga epekto sa paggamit matag sangkap.
Ang tanan nga kini nga gahum moabut sa usa ka gasto: gawas kung imong masabtan kung giunsa kini molihok, mahimo’g kini makapalibog. Niini nga post, atong tan-awon ang lain-laing mga pananglitan aron imong masabtan ang konsepto nga modelo ug magamit kini sa imong kaugalingong code.
React Hooks – Unsa ang gipaningkamutan nga sulbaron?
Ang mga kawit una nga gipaila sa React nga bersyon 16.8 ug karon gigamit sa daghang mga proyekto sa React. Gibuntog sa mga kaw-it ang problema sa pagsubli sa code tali sa mga sangkap. Gisulat kini nga wala gigamit ang mga klase. Wala kini magpasabot nga ang React nag-abandonar sa mga klase; Ang mga kaw-it kay usa lang ka alternatibong paagi.
Gitugotan ka sa React nga dali ka makahimo og sopistikado nga mga sangkap nga adunay stateful logic. Lisud ang pagbulag niini nga mga sangkap tungod kay ang klase nagsalig sa React Lifecycle Methods. Dinhi diin moabut ang React Hooks.
Gitugotan ka nila nga bahinon ang usa ka sangkap sa gagmay nga mga gimbuhaton. Imbis nga bahinon ang code sa gagmay nga mga piraso base sa mga pamaagi sa Lifecycle, mahimo nimong ihan-ay ug ibulag ang code sa gagmay nga mga yunit depende sa gamit.
Unsa ang useEffect Hook?
Ang mga kaw-it mao ang mga gimbuhaton nga nagtugot kanimo sa pag-access sa estado ug uban pang mga kapabilidad sa reaksyon nga dili kinahanglan nga isulat ang mga klase sa ES6. Ang react hooks API adunay hook nga gitawag ug useEffect. Kung nahibal-an nimo ang mga siklo sa kinabuhi sa reaksyon, ang useEffect hook parehas sa sangkapDidMount, sangkapDidUpdate, Ug sangkapWillUnmount gihiusa nga mga pamaagi sa siklo sa kinabuhi.
Sumala sa dokumentasyon sa React Hooks, gihimo kini aron masulbad ang pipila ka mga isyu sa mga pamaagi sa siklo sa kinabuhi sa sangkap sa klase sa ES6.
Sintaks
Ang una nga argumento usa ka function sa callback, nga gipatuman sa default pagkahuman sa matag paghubad. Ang ikaduha nga parametro usa ka opsyonal nga Dependency array nga nagtudlo sa Hook sa pag-callback lamang kung ang target nga estado mausab.
Ang Hook nagtandi sa matag dependency sa makasaysayanon ug karon nga mga estado. Kung ang duha ka mga kantidad dili magkatugma, ang Hook nagtawag sa callback nga gitakda sa unang parameter. Ang mga dependency arrays nag-usab sa naandan nga callback nga kinaiya ug naggarantiya nga ang Hook wala magtagad sa tanan nga uban nga mga component sa component scope.
Panguna nga paggamit
Aron makatipig usa ka mensahe, gigamit nako ang React useState sa sample sa code sa taas. Pagkahuman niana, gikuha nako ang variable sa estado sa mensahe ug gi-print kini sa screen. Bisan pa, gusto nako karon nga gamiton angEffect aron usbon ang mensahe sa usa ka segundo pagkahuman na-mount ang sangkap.
Akong gisal-ot ang akong epekto luyo sa useState nga linya human sa pag-import sa useEffect gikan sa React framework. Ang una nga parameter nga magamitEffect usa ka function. Kung kini nga function handler gipatuman, kini ang mag-atiman sa bisan unsang mga epekto nga imong gihatag. Ang function usa ka callback function nga gitawag kung ang usa sa React component lifecycle nga mga panghitabo mahitabo.
Kanus-a kini gamiton?
Ang useEffect hook mahimong mapuslanon sa lain-laing mga sitwasyon. Ang mosunod mao ang labing importante:
- Mahimo natong usbon kini nga parameter gikan sa kilid sa kliyente kung gusto namong makuha ang datos depende sa gihatag nga argumento. Mahinumduman kini human ma-update ang parameter nga adunay bag-ong datos.
- Kung gusto namon nga makuha ang datos gikan sa usa ka endpoint sa API ug ipakita kini sa kilid sa kliyente. Kung mag-render ang among component, ang function o handler nga gihatag sa useEffect hook ipatuman, ug ang data sa component states makuha. Kini nga mga status gigamit dayon sa mga sangkap sa user interface.
- Kung ang imong sangkap nagsalig sa datos gikan sa gawas nga kalibutan ug dili namon masiguro nga moabut ang datos, kinahanglan namon gamiton angEffect (tingali ang server naa didto). Imbis nga ilabay ang mga problema ug pugngan ang ubang mga sangkap nga ipakita, ibutang kini sa useEffect hook.
Paggamit sa mga kaso
Kung ang sangkap mag-re-render pagkahuman sa una nga pagdagan, dili kini ipatuman.
Sa matag higayon nga ang usa ka sangkap mag-render o mag-re-render, kini kinahanglan nga ipatuman kanunay.
Sa kasagaran, ang programa kausa ra modagan. Pagkahuman, kung ang mga kantidad sa prop mausab, pagdagan:
Alang sa asynchronous nga mga kalihokan, gamita kanunay ang useEffect.
useEffect code block mao ang dayag nga mga marker sa asynchronous nga mga trabaho para sa imong mga kaubang developers. Posible ang paghimo og asynchronous code nga wala gigamit ang useEffect, apan dili kini ang "React method," ug kini nagdugang sa pagkakomplikado ug sa risgo sa mga sayup.
Ang paggamit sa useEffect imbes nga isulat ang asynchronous code nga mahimong makapahunong sa UI usa ka ilado nga teknik sa React nga komunidad, labi na ang paagi sa paghimo niini sa React team aron makahimo usa ka side effect.
Laing bentaha sa paggamit niini mao nga ang mga developer mahimo ra nga magrepaso sa code ug makamatikod dayon sa code nga gipadagan "sa gawas sa kontrol nga agianan," nga mahimong hinungdanon pagkahuman sa una nga siklo sa paghubad. Dugang pa, ang mga bloke angay alang sa pagkuha sa magamit pag-usab ug labi pa nga semantiko nga kostumbre nga mga Hook.
Usa ka pananglitan
Gamit ang useEffect code, pagdugang usa ka numero matag segundo.
Panapos
Ang pagsabut sa nagpahiping mga prinsipyo sa disenyo ug labing maayo nga mga gawi sa paggamitEffect Hook, sa akong tan-aw, usa ka kritikal nga kahanas nga mahibal-an kung gusto nimo mahimong usa ka sunod nga lebel nga React developer.
Sa pag-summarize, ang useEffect Hook nakadawat ug function nga naglakip sa imperative, posibleng epekto sa bug-os nga lohika. Ang dependence array, nga mao ang ikaduha nga parameter, mahimong magamit sa pag-impluwensya sa pagpatay. Samtang nag-atubang niini, kinahanglan usab nga isulat ang code sa paglimpyo gamit ang function sa pagbalik.
Ipahibalo kanamo sa mga komento kung ang artikulo makatabang.
Leave sa usa ka Reply