Si ou se yon devlopè React ki poko aprann sou kwòk React, kounye a se moman an. Pòs sa a pral pase nan useEffect React Hook an detay. Li se ekivalan zen nan yon kouto Swis Lame. Li rezoud yon varyete de pwoblèm, tankou ki jan yo jwenn done lè yon eleman monte, ki jan yo kouri kòd lè yon eta oswa yon akseswar chanje, ki jan yo mete kanpe revèy oswa entèval, ak sou sa.
Yo itilize yon useEffect pou prèske tout bagay ou vle "fè" nan yon eleman React ki pa retounen JSX (nenpòt kalite efè segondè). Ou ka tou gen plizyè itilizasyonEfè pou chak eleman.
Tout pouvwa sa a gen yon pri: sof si ou konprann ki jan li fonksyone, li ka boulvèsan. Nan pòs sa a, nou pral gade yon varyete egzanp pou ou ka atrab modèl konseptyèl la epi aplike li nan pwòp kòd ou.
Reyaji Kwòk – Ki sa li ap eseye rezoud?
Hooks te premye prezante nan React vèsyon 16.8 epi kounye a yo itilize pa anpil pwojè React. Hooks genyen batay la pwoblèm repetisyon kòd ant konpozan. Yo ekri san yo pa itilize klas yo. Sa pa vle di ke React ap abandone klas yo; Kwòk yo se tou senpleman yon metòd altènatif.
React pèmèt ou byen vit kreye eleman sofistike ak lojik eta. Li difisil pou separe eleman sa yo paske klas la depann sou Metòd React Lifecycle. Sa a se kote React Hooks antre.
Yo pèmèt ou divize yon eleman an pi piti fonksyon. Olye pou yo divize kòd an pi piti moso ki baze sou metòd Lifecycle, kounye a ou ka fè aranjman epi separe kòd an pi piti inite depann sou fonksyonalite.
Ki sa ki se useEffect Hook?
Kwòk yo se fonksyon ki pèmèt ou jwenn aksè nan eta ak lòt kapasite reyaji san yo pa bezwen ekri klas ES6. API kwòk reyaji yo gen yon zen ki rele useEffect. Si w ap konnen sik lavi reyaji, zen an useEffect se menm bagay la ak componentDidMount, componentDidUpdate, epi componentWillUnmount metòd sik lavi konbine.
Dapre dokiman React Hooks, li te kreye pou rezoud kèk nan pwoblèm yo ak metòd sik lavi eleman ES6 klas yo.
Sentaks
Premye agiman an se yon fonksyon callback, ki egzekite pa default apre chak rann. Dezyèm paramèt la se yon etalaj Depandans si ou vle ki enstwi Hook la pou fè apèl sèlman si eta sib la chanje.
Hook la konpare eta istorik ak prezan chak depandans. Si de valè yo pa matche, Hook la envoke callback ki espesifye nan premye paramèt la. Etalaj depandans yo chanje konpòtman abityèl la apèl ak garanti ke Hook la inyore tout lòt konpozan nan sijè ki abòde lan eleman.
Itilizasyon debaz
Pou sove yon mesaj, mwen itilize React useState nan echantiyon kòd ki anwo a. Apre sa, mwen pran varyab eta mesaj mwen an epi enprime li sou ekran an. Sepandan, kounye a mwen vle itilize Efè pou modifye mesaj la yon segonn apre eleman an te monte.
Mwen te mete efè mwen dèyè liy useState apre enpòte useEffect soti nan fondasyon React la. Premye paramèt pou itilizeEffect se yon fonksyon. Lè moun kap okipe fonksyon sa a egzekite, li pral pran swen nenpòt efè segondè ou bay. Fonksyon an se yon fonksyon callback ki rele lè youn nan evènman sik lavi eleman React rive.
Lè yo sèvi ak li?
Kwòk useEffect ka itil nan yon varyete sitiyasyon. Sa ki annapre yo se pi enpòtan an:
- Nou ka chanje paramèt sa a soti nan bò kliyan an lè nou vle chache done depann sou yon agiman apwovizyone. Li pral raple apre paramèt la te mete ajou ak done fre.
- Si nou vle rekipere done ki sòti nan yon pwen final API epi montre li sou bò kliyan an. Lè eleman nou an rann, fonksyon an oswa moun kap okipe yo bay zen an useEffect egzekite, epi done nan eta yo eleman yo rekipere. Lè sa a, estati sa yo ap travay nan eleman koòdone itilizatè.
- Lè eleman ou a depann sou done ki soti nan mond lan deyò epi nou pa ka asire ke done yo pral rive, nou ta dwe itilize Efè (petèt sèvè a desann la). Olye ke voye pwoblèm ak anpeche lòt konpozan yo te parèt, mete yo nan zen an useEffect.
Sèvi ak ka
Si eleman an re-rann apre premye kouri a, li pa pral egzekite.
Chak fwa yon eleman rann oswa re-rann, li ta dwe toujou egzekite.
Pa default, pwogram nan kouri sèlman yon fwa. Apre sa, si valè prop yo chanje, kouri:
Pou aktivite asynchrone, toujou sèvi ak useEffect.
Blòk kòd useEffect se makè evidan nan travay asynchrone pou devlopè parèy ou yo. Li posib pou kreye kòd asynchrone san yo pa itilize useEffect, men sa a se pa "metòd React" epi li ogmante tou de konpleksite ak risk pou fè erè.
Sèvi ak useEffect olye pou yo ekri kòd asynchrone ki ka sispann UI a se yon teknik byen li te ye nan kominote React la, espesyalman fason ekip React la te bati li pou fè yon efè segondè.
Yon lòt avantaj nan itilize li se ke devlopè yo ka senpleman revize kòd la epi imedyatman detekte kòd ki kouri "deyò koule kontwòl la," ki vin enpòtan sèlman apre premye sik rann lan. Anplis de sa, blòk yo apwopriye pou fè ekstraksyon nan kwòk koutim ki kapab itilize ankò e menm plis semantik.
Yon egzanp
Sèvi ak kòd useEffect, ogmante yon nimewo pou chak segonn.
konklizyon
Konprann prensip konsepsyon ki kache yo ak pi bon pratik nan useEffect Hook, nan wè mwen, se yon konpetans kritik yo aprann si ou vle vin yon pwochen nivo devlopè React.
Pou rezime, useEffect Hook la resevwa yon fonksyon ki gen ladann enperatif, potansyèlman efè lojik konplè. Etalaj depandans lan, ki se dezyèm paramèt la, ka itilize pou enfliyanse ekzekisyon an. Pandan y ap fè fas ak li, li nesesè tou pou ekri kòd netwayaj lè l sèvi avèk fonksyon an retounen.
Fè nou konnen nan kòmantè yo si atik la te itil.
Kite yon Reply