Ger hûn pêşdebirek React in ku hîn hînî çîngên React nebûye, niha dem e. Ev post dê bi hûrgulî di nav UseEffect React Hook de derbas bibe. Ew wekheviya kêrê ya Artêşa Swîsreyê ye. Ew cûrbecûr pirsgirêkan çareser dike, mîna meriv çawa gava ku pêkhateyek hildiweşîne, meriv çawa kodê dimeşîne dema ku dewletek an protek diguhezîne, meriv çawa demjimêr an navberan saz dike, û hwd.
UseEffect ji bo her tiştê ku hûn dixwazin "bikin" di pêkhateyek React de ku JSX venagere (her celeb bandorek alî) tê bikar anîn. Di heman demê de dibe ku hûn ji her pêkhateyê çendîn UseEffects jî hebin.
Hemî ev hêz bi lêçûnek tê: heya ku hûn fam nekin ka ew çawa dixebite, dibe ku ew tevlihev be. Di vê postê de, em ê li cûrbecûr mînakan binihêrin da ku hûn modela têgehî fam bikin û wê li koda xwe bicîh bînin.
React Hooks – Hewl dide çi çareser bike?
Hooks yekem car di guhertoya React 16.8 de hatin destnîşan kirin û naha ji hêla gelek projeyên React ve têne bikar anîn. Hooks pirsgirêka dubarekirina kodê di navbera pêkhateyan de derbas dike. Ew bêyî bikaranîna dersan têne nivîsandin. Ev nayê vê wateyê ku React dev ji dersan berdide; hook bi tenê rêbazek alternatîf in.
React dihêle hûn zû bi mentiqê dewletparêz pêkhateyên sofîstîke biafirînin. Zehmet e ku meriv van hêmanan ji hev veqetîne ji ber ku çîn xwe dispêre Rêbazên Jiyana React. Ev cihê ku React Hooks tê de ye.
Ew dihêlin ku hûn hêmanek li fonksiyonên piçûktir dabeş bikin. Li şûna ku hûn li ser bingeha rêbazên Lifecycle kodê li perçeyên piçûktir dabeş bikin, hûn dikarin li gorî fonksiyonê kodê li yekîneyên piçûktir saz bikin û veqetînin.
UseEffect Hook çi ye?
Hook fonksiyonên ku dihêle hûn bêyî nivîsandina dersên ES6 bigihîjin kapasîteyên dewletê û reaksiyonên din. React hooks API xwedan çîçekek bi navê useEffect heye. Ger hûn bi çerxên jiyanê yên reaktîkî nas in, çengê useEffect heman e. pêkenînDidMount, pêkenînDidUpdate, û fişaraWillUnmount rêbazên çerxa jiyanê bi hev re.
Li gorî belgeya React Hooks, ew ji bo çareserkirina hin pirsgirêkan bi rêbazên çerxa jiyanê ya pêkhateya çîna ES6 hate afirandin.
Syntax
Argumana yekem fonksiyonek paşvekişandinê ye, ku piştî her renderê ji hêla xwerû ve tê darve kirin. Parametreya duyemîn rêzek Pêwendiya vebijarkî ye ku talîmat dide Hook ku tenê heke rewşa armanc biguhezîne vegere bangê bike.
The Hook her girêdayî dewletên dîrokî û heyî dide ber hev. Ger her du nirx li hev nekin, Hook vegera banga ku di parametreya yekem de hatî destnîşan kirin vedixwîne. Rêzikên girêdayîbûnê tevgera paşvekêşana adetî diguhezînin û garantî dikin ku Hook hemî pêkhateyên din ên di çarçoweya pêkhateyê de paşguh dike.
Bikaranîna bingehîn
Ji bo tomarkirina peyamek, ez di nimûneya kodê ya jorîn de React useState bikar tînim. Piştî wê, ez guherbara rewşa peyama xwe digirim û li ser ekranê çap dikim. Lêbelê, ez naha dixwazim Effectê bikar bînim da ku peyamê saniyeyek piştî ku hêman hate danîn biguhezînim.
Piştî ku useEffect ji çarçoweya React îtxal kir, min bandora xwe li pişt xeta useState xist. Parametreya yekem a ku Effect bikar tîne fonksiyonek e. Dema ku ev rêvekerê fonksiyonê were darve kirin, ew ê bala xwe bide her bandorên ku hûn peyda dikin. Fonksiyon fonksiyonek vegerê ye ku gava yek ji bûyerên çerxa jiyanê ya pêkhateya React çêdibe tê gotin.
Kengê bikar bînin?
Hookê useEffect dibe ku di gelek rewşan de bikêr be. Yên jêrîn yên herî girîng in:
- Dema ku em dixwazin daneyan li gorî argumanek peydakirî bistînin, em dikarin vê parametreyê ji hêla xerîdar ve biguhezînin. Piştî ku parametre bi daneyên nû ve were nûve kirin dê were bîranîn.
- Ger em dixwazin daneyan ji xalek dawiya API-yê bistînin û li ser milê xerîdar nîşan bidin. Dema ku pêkhateya me çêdibe, fonksiyon an rêkarê ku ji hookê useEffect re hatî dayîn tê darve kirin, û daneyên di dewletên pêkhateyê de têne wergirtin. Dûv re ev rewş di hêmanên navbeynkariya bikarhêner de têne bikar anîn.
- Gava ku pêkhateya we xwe dispêre daneyên ji cîhana derve û em nikanin piştrast bikin ku dê dane werin, divê em Effect bikar bînin (dibe ku server li wir be). Li şûna ku pirsgirêkan bavêjin û nehêlin ku hêmanên din werin xuyang kirin, wan bixin nav çengê useEffect.
Dozan bikar bînin
Ger pêkhate piştî gera yekem ji nû ve were pêşkêş kirin, ew ê neyê darve kirin.
Kengê ku pêkhateyek çêdibe an ji nû ve vedibêje, divê her gav were darve kirin.
Bi xwerû, bername tenê carekê dimeşe. Dûv re, heke nirxên prop biguherînin, bimeşînin:
Ji bo çalakiyên asynchronous, her gav useEffect bikar bînin.
Blokên kodê useEffect ji bo pêşdebirên hevalên we nîşankerên eşkere yên karên asynkron in. Dibe ku bêyî karanîna useEffect koda asynchronous biafirînin, lê ev ne "rêbaza React" e, û ew hem tevlihevî û hem jî xetereya xeletiyan zêde dike.
Bikaranîna useEffect li şûna nivîsandina koda asynkron a ku dibe ku UI-yê rawestîne di civata React de teknîkek naskirî ye, nemaze awayê ku tîmê React ew ava kiriye da ku bandorek alî bike.
Feydeyek din a karanîna wê ev e ku pêşdebiran dikarin bi hêsanî kodê binirxînin û tavilê koda ku "li derveyî herikîna kontrolê" tê meşandin, ku tenê piştî çerxa yekem a renderê girîng dibe tespît bikin. Wekî din, blokan ji bo derxistina li Hookên xwerû yên ji nû ve bi kar anîn û hê bêtir semantîk guncan in.
Mînakek
Bi karanîna koda useEffect, di her çirkekê de hejmarek zêde bikin.
Xelasî
Fêmkirina prensîbên sêwiranê yên bingehîn û pratîkên çêtirîn ên useEffect Hook, bi dîtina min, jêhatîbûnek krîtîk e ku meriv fêr bibe ger hûn dixwazin bibin pêşdebirek React-a-a-dê.
Bi kurtasî, useEffect Hook fonksiyonek werdigire ku tê de mantiqa tam a mecbûrî, potansiyel bandor dike. Rêzeya girêdayîbûnê, ku pîvana duyemîn e, dikare were bikar anîn da ku bandorê li darvekirinê bike. Dema ku meriv pê re mijûl dibe, di heman demê de pêdivî ye ku koda paqijkirinê bi karanîna fonksiyona vegerê jî binivîsin.
Ger gotar alîkar bû, di şîroveyan de ji me re agahdar bikin.
Leave a Reply