As jo in React-ûntwikkelder binne dy't noch net leard hawwe oer React-haken, is it no it momint. Dizze post sil de useEffect React Hook yn detail gean. It is it hook-ekwivalint fan in Switserske legermes. It lost in ferskaat oan problemen op, lykas hoe't jo gegevens krije as in komponint mount, hoe't jo koade útfiere as in steat as in prop feroaret, hoe't jo timers of yntervallen ynstelle, ensfh.
In useEffect wurdt brûkt foar sa'n bytsje alles wat jo wolle "dwaan" yn in React-komponint dat JSX net werombringt (elk type by-effekt). Jo kinne ek ferskate useEffects hawwe per komponint.
Al dizze krêft komt foar in kosten: útsein as jo begripe hoe't it wurket, kin it ferbjusterjend wêze. Yn dit post sille wy in ferskaat oan foarbylden besjen, sadat jo it konseptuele model kinne begripe en it kinne tapasse op jo eigen koade.
Reagearje Hooks - Wat besiket it op te lossen?
Haken waarden foar it earst yntrodusearre yn React ferzje 16.8 en wurde no brûkt troch in protte React-projekten. Haken oerwint it probleem fan koade werhelling tusken komponinten. Se wurde skreaun sûnder it brûken fan klassen. Dit betsjut net dat React klassen ferlit; haken binne gewoan in alternative metoade.
React kinne jo fluch meitsje ferfine komponinten mei stateful logika. It is lestich om dizze komponinten te skieden, om't de klasse fertrout op React Lifecycle Methods. Dit is wêr't React Hooks binnenkomt.
Se tastean jo te ferdielen in komponint yn lytsere funksjes. Ynstee fan koade te dielen yn lytsere stikken basearre op Lifecycle-metoaden, kinne jo no koade regelje en skiede yn lytsere ienheden ôfhinklik fan funksjonaliteit.
Wat is useEffect Hook?
Haken binne funksjes wêrmei jo tagong krije ta steat en oare reagearjen mooglikheden sûnder ES6-klassen te skriuwen. De react hooks API hat in heak neamd useEffect. As jo bekend binne mei reagearjende libbenssyklusen, is de useEffect-haak itselde as de componentDidMount, componentDidUpdate, en componentWillUnmount libbenssyklusmetoaden kombineare.
Neffens de React Hooks-dokumintaasje is it makke om guon fan 'e problemen op te lossen mei ES6-klasse komponint libbensyklusmetoaden.
Syntaksis
It earste argumint is in werombelfunksje, dy't standert wurdt útfierd nei elke rendering. De twadde parameter is in opsjoneel Dependency-array dy't de Hook ynstruearret om allinich werom te roppen as de doelstatus feroaret.
De Hook fergeliket de histoaryske en hjoeddeiske steaten fan elke ôfhinklikens. As de twa wearden net oerienkomme, ropt de Hook de weromrop oan dy't yn 'e earste parameter oanjûn is. Ofhinklikens arrays feroarje de gewoane callback gedrach en garandearje dat de Hook negearret alle oare komponinten yn de komponint omfang.
Basis gebrûk
Om in berjocht op te slaan, brûk ik React useState yn it koadefoarbyld hjirboppe. Dêrnei nim ik myn berjochtstatus fariabele en printsje it op it skerm. Ik wol no lykwols Effect brûke om it berjocht in sekonde te feroarjen nei't de komponint is monteard.
Ik haw myn effekt ynfoege efter de line useState nei it ymportearjen fan useEffect út it React-ramt. De earste parameter te brûkenEffect is in funksje. As dizze funksje handler wurdt útfierd, sil it soargje foar alle side-effekten dy't jo leverje. De funksje is in werombelfunksje dy't wurdt oanroppen as ien fan 'e libbenssykluseveneminten fan 'e React-komponint plakfynt.
Wannear moatte jo it brûke?
De useEffect-haak kin nuttich wêze yn in ferskaat oan situaasjes. De folgjende binne de meast krúsjale:
- Wy kinne dizze parameter feroarje fan 'e kant fan' e kliïnt as wy gegevens ophelje wolle ôfhinklik fan in levere argumint. It sil oproppen wurde nei't de parameter is bywurke mei farske gegevens.
- As wy wolle heljen gegevens út in API einpunt en werjaan it op de client-side. As ús komponint rendert, wurdt de funksje of handler jûn oan 'e useEffect hook útfierd, en gegevens yn' e komponint steaten wurde ophelle. Dizze statusen wurde dan brûkt yn komponinten fan brûkersynterface.
- As jo komponint fertrout op gegevens fan 'e bûtenwrâld en wy kinne net soargje dat gegevens komme, moatte wy Effect brûke (miskien is de tsjinner dêr del). Yn plak fan problemen te goaien en te foarkommen dat oare komponinten werjûn wurde, pleatse se yn 'e useEffect-haak.
Gebrûk fan gefallen
As de komponint re-rendert nei de earste run, sil it net útfiere.
Wannear't in komponint rendert of opnij rendert, moat it altyd wurde útfierd.
Standert rint it programma mar ien kear. Neitiid, as de propwearden feroarje, rinne dan:
Brûk altyd useEffect foar asynchrone aktiviteiten.
useEffect-koadeblokken binne foar de hân lizzende markers fan asynchrone banen foar jo kollega-ûntwikkelders. It is mooglik om asynchrone koade te meitsjen sûnder useEffect te brûken, mar dit is net de "React-metoade", en it fergruttet sawol de kompleksiteit as it risiko fan flaters.
UseEffect brûke ynstee fan asynchrone koade te skriuwen dy't de UI kin stopje is in bekende technyk yn 'e React-mienskip, foaral de manier wêrop it React-team it hat boud om in by-effekt út te fieren.
In oar foardiel fan it brûken is dat ûntwikkelders de koade gewoan kinne besjen en koade direkt kinne ûntdekke dy't "bûten de kontrôlestream" wurdt útfierd, wat pas wichtich wurdt nei de earste rendersyklus. Fierder, de blokken binne geskikt foar winning yn reusable en noch mear semantyske oanpaste Hooks.
In foarbyld
Mei help fan de useEffect-koade, ferheegje in nûmer per sekonde.
Konklúzje
De ûnderlizzende ûntwerpprinsipes en bêste praktiken fan 'e useEffect Hook begripe, is neffens my in krityske feardigens om te learen as jo in React-ûntwikkelder op folgjende nivo wolle wurde.
Om gearfetsje, de useEffect Hook krijt in funksje dy't ymperatyf omfettet, potensjeel effekt folsleine logika. De ôfhinklikheidsarray, dat is de twadde parameter, kin brûkt wurde om de útfiering te beynfloedzjen. By it omgean mei it, is it ek nedich om skjinmeitsjen koade te skriuwen mei help fan de werom funksje.
Lit ús witte yn 'e opmerkingen as it artikel nuttich wie.
Leave a Reply