Ti o ba jẹ oluṣe idagbasoke React ti ko tii kọ ẹkọ nipa awọn kio React, bayi ni akoko naa. Ifiweranṣẹ yii yoo lọ nipasẹ liloEffect React Hook ni awọn alaye. O ti wa ni awọn kio deede ti a Swiss Army ọbẹ. O yanju ọpọlọpọ awọn ọran, bii bii o ṣe le gba data nigbati paati ba gbe soke, bii o ṣe le ṣiṣẹ koodu nigbati ipinlẹ tabi ohun elo kan yipada, bii o ṣe le ṣeto awọn akoko tabi awọn aaye arin, ati bẹbẹ lọ.
A useEffect ti lo fun lẹwa Elo ohunkohun ti o fẹ lati “ṣe” ni a React paati ti o ti wa ni ko pada JSX (eyikeyi iru ti ẹgbẹ ipa). O tun le ni ọpọlọpọ awọn Ipa lilo fun paati.
Gbogbo agbara yii wa ni idiyele: ayafi ti o ba loye bi o ṣe n ṣiṣẹ, o le jẹ idamu. Ninu ifiweranṣẹ yii, a yoo wo ọpọlọpọ awọn apẹẹrẹ ki o le ni oye awoṣe imọran ati lo si koodu tirẹ.
Fesi Hooks – Kini o n gbiyanju lati yanju?
Awọn kio ni a kọkọ ṣafihan ni ẹya React 16.8 ati pe o jẹ lilo nipasẹ ọpọlọpọ awọn iṣẹ akanṣe React. Awọn Hooks bori iṣoro ti atunwi koodu laarin awọn paati. Wọn ti kọ laisi lilo awọn kilasi. Eyi ko tumọ si pe React n kọ awọn kilasi silẹ; ìkọ ni o wa nìkan yiyan ọna.
Fesi faye gba o lati ni kiakia ṣẹda fafa irinše pẹlu stateful kannaa. O nira lati yapa awọn paati wọnyi niwọn igba ti kilasi gbarale Awọn ọna Igbesi aye React. Eyi ni ibi ti Awọn Hooks React wa.
Wọn gba ọ laaye lati pin paati si awọn iṣẹ kekere. Dipo pinpin koodu si awọn ege kekere ti o da lori awọn ọna Lifecycle, o le ṣeto bayi ati ya koodu si awọn iwọn kekere ti o da lori iṣẹ ṣiṣe.
Kini UseEffect Hook?
Awọn Hooks jẹ awọn iṣẹ ti o gba ọ laaye lati wọle si ipinlẹ ati awọn agbara fesi laisi nini lati kọ awọn kilasi ES6. Awọn kio esi API ni kio kan ti a pe ni useEffect. Ti o ba mọ pẹlu awọn iyipo igbesi aye fesi, kioIpa lilo jẹ kanna bi paatiDidMount, paatiDidUpdate, Ati paatiWillUnmount awọn ọna igbesi aye ni idapo.
Gẹgẹbi iwe Awọn Hooks React, o ṣẹda lati yanju diẹ ninu awọn ọran pẹlu awọn ọna igbesi aye paati kilasi ES6.
sintasi
Ariyanjiyan akọkọ jẹ iṣẹ ipe pada, eyiti o jẹ ṣiṣe nipasẹ aiyipada lẹhin ṣiṣe kọọkan. Paramita keji jẹ eto Igbẹkẹle yiyan ti o kọ kio lati pe pada nikan ti ipo ibi-afẹde ba yipada.
Awọn kio wé kọọkan gbára ká itan ati bayi ipinle. Ti awọn iye meji ko ba baramu, Kio n pe ipe pada ti o pato ninu paramita akọkọ. Awọn igbelewọn igbẹkẹle paarọ ihuwasi ipe pada deede ati iṣeduro pe kio kọju gbogbo awọn paati miiran ninu iwọn paati.
Lilo ipilẹ
Lati fi ifiranṣẹ pamọ, Mo nlo React useState ninu apẹẹrẹ koodu loke. Lẹhin iyẹn, Mo gba iyipada ipo ifiranṣẹ mi ati tẹ sita loju iboju. Sibẹsibẹ, Mo fẹ lati lo Ipa lati yi ifiranṣẹ pada ni iṣẹju-aaya lẹhin ti a ti gbe paati naa.
Mo ti fi ipa mi sii lẹhin laini liloState lẹhin gbigbe wọleEffect lati inu ilana React. Paramita akọkọ lati lo Ipa jẹ iṣẹ kan. Nigbati oluṣakoso iṣẹ yii ba ti ṣiṣẹ, yoo ṣe abojuto eyikeyi awọn ipa ẹgbẹ ti o pese. Iṣẹ naa jẹ iṣẹ ipe pada ti a pe nigbati ọkan ninu awọn iṣẹlẹ igbesi aye React ba waye.
Nigbawo lati lo?
Awọn useEffect ìkọ le jẹ wulo ni orisirisi awọn ipo. Awọn atẹle jẹ pataki julọ:
- A le yi paramita yii pada lati ẹgbẹ alabara nigba ti a fẹ lati mu data da lori ariyanjiyan ti a pese. Yoo ṣe iranti lẹhin ti paramita ti ni imudojuiwọn pẹlu data tuntun.
- Ti a ba fẹ gba data pada lati aaye ipari API kan ati ṣafihan rẹ ni ẹgbẹ alabara. Nigbati paati wa ba ṣe, iṣẹ tabi oluṣakoso ti a fun kio liloEffect yoo ṣiṣẹ, ati pe data ninu awọn ipinlẹ paati ni a gba pada. Awọn ipo wọnyi lẹhinna ni iṣẹ ni awọn paati wiwo olumulo.
- Nigbati paati rẹ ba da lori data lati ita ati pe a ko le rii daju pe data yoo de, o yẹ ki a loEffect (boya olupin wa ni isalẹ). Dipo ju awọn iṣoro jiju ati idilọwọ awọn paati miiran lati han, gbe wọn sinu kioEffect.
Lo awọn iṣẹlẹ
Ti paati ba tun ṣe lẹhin ṣiṣe akọkọ, kii yoo ṣiṣẹ.
Nigbakugba ti paati kan ba ṣe tabi tun ṣe, o yẹ ki o ṣiṣẹ nigbagbogbo.
Nipa aiyipada, eto naa nṣiṣẹ ni ẹẹkan. Lẹhinna, ti awọn iye prop ba yipada, ṣiṣẹ:
Fun awọn iṣẹ ṣiṣe asynchronous, nigbagbogbo lo useEffect.
UseEffect koodu ohun amorindun ni o wa kedere asami ti asynchronous ise fun ẹlẹgbẹ rẹ Difelopa. O ṣee ṣe lati ṣẹda koodu asynchronous laisi lilo liloEffect, ṣugbọn eyi kii ṣe “ọna React,” ati pe o pọ si mejeeji idiju ati eewu awọn aṣiṣe.
Lilo useEffect dipo kikọ koodu asynchronous ti o le da UI duro jẹ ilana ti a mọ daradara ni agbegbe React, paapaa ọna ti ẹgbẹ React ti kọ lati ṣe ipa ẹgbẹ kan.
Anfani miiran ti lilo rẹ ni pe awọn olupilẹṣẹ le jiroro ni atunyẹwo koodu naa ki o rii koodu lẹsẹkẹsẹ ti o ṣiṣẹ “ni ita ṣiṣan iṣakoso,” eyiti o di pataki nikan lẹhin ọmọ ti ipilẹṣẹ akọkọ. Pẹlupẹlu, awọn bulọọki naa dara fun isediwon sinu atunlo ati paapaa awọn Hooks aṣa atọmọ diẹ sii.
Apeere
Lilo koodu Ipa ipa, mu nọmba kan pọ si fun iṣẹju kan.
ipari
Lílóye awọn ipilẹ apẹrẹ ti o wa labẹ ati awọn iṣe ti o dara julọ ti useEffect Hook, ni iwo temi, jẹ ọgbọn pataki lati kọ ẹkọ ti o ba fẹ di olupilẹṣẹ Idahun ipele atẹle.
Lati ṣoki, useEffect Hook gba iṣẹ kan ti o pẹlu dandan, ti o le ni ipa ni kikun kannaa. Eto igbẹkẹle, eyiti o jẹ paramita keji, le ṣee lo lati ni agba ipaniyan naa. Lakoko ti o n ṣe pẹlu rẹ, o tun jẹ dandan lati kọ koodu mimọ ni lilo iṣẹ ipadabọ.
Jẹ ki a mọ ninu awọn asọye ti nkan naa ba wulo.
Fi a Reply