En introduktion til React Hooks

Da ReactJs-biblioteket får nye opdateringer, tilføjes der mange ting, og nogle få, der også er udfaset. ReactJs bliver mere magtfulde dag for dag på grund af sådanne opdateringer. Som udvikler skal du holde dig opdateret med nye funktioner, der kommer ud i hver version.

Har du hørt om React Hooks?

Nå, React Hooks, en funktion, der er tilgængelig i React v16.7.0-alpha, er noget fantastisk, du bør vide om.

Her er en teaser til React Hooks.

I ovenstående kode useStateer den første krog.

Lad os nu springe ind i det problem, som Reacts Hooks vil løse.

Når alt kommer til alt, introduceres alle nye funktioner for at løse et problem. Her er listen over ting, som det officielle reaktionswebsted har at sige om de problemer, der vil blive løst.

Det er svært at genbruge stateful logik mellem komponenter

Genbrugsadfærd kan ikke knyttes til React-komponenten. Et godt eksempel på det kunne være at oprette forbindelse til butikken. Hvis du har nogle erfaringer med React, kender du muligvis nogle af mønstrene som gengivelsesrekvisitter og komponenter af højere orden, der kan være nyttige, når du løser sådanne problemer. Ved hjælp af sådanne mønstre skal komponenter omstruktureres for at bruge dem, hvilket gør koden sværere at følge og vedligeholde.

Med introduktionen af ​​Hooks kan stateful logik udvindes fra komponenten. Dette gør det muligt at teste det uafhængigt, og det kan genbruges.

Med Hooks kan du genbruge stateful logik uden faktisk at ændre dit komponenthierarki.

Komplekse komponenter bliver svære at forstå

Der er tidspunkter, hvor en komponent vokser fra at have en lille tilstand til en uhåndterbar tilstand med stateful logik.

Hver livscyklusmetode indeholder undertiden en blanding af ikke-relateret logik. For eksempel kan en komponent muligvis udføre nogle data hentning via API-opkald i componentDidMountog componentDidUpdate. Den samme componentDidMountmetode kan dog også indeholde noget af den ikke-relaterede logik.

Denne logik opretter begivenhedslyttere med oprydning udført i componentWillUnmount. Relateret kode, der ændres sammen, bliver delt.

Den ikke-relaterede kode, der kombineres til en enkelt metode, bringer fejl og uoverensstemmelser ind.

Vi støder ofte på en situation, hvor vi ikke er i stand til at opdele en stor komponent i mindre på grund af de statefulde værdier. Det bliver også svært at teste dem.

For at løse dette problem giver Hooks dig mulighed for at opdele en komponent i mindre funktioner baseret på hvilke stykker der er relateret. Et godt eksempel på det kan være at oprette et abonnement eller hente data uanset kodedeling baseret på livscyklusmetoden.

Med Hooks kan flere af React's funktioner bruges uden behov for klasser.

Men hvordan fungerer kroge virkelig?

Her er kodestykket, vi så ovenfor:

Link til CodeSandbox

Brugen af useStateer den krog, som vi taler om.

Vi kalder det inde i en funktionskomponent for at tilføje en lokal tilstand til den. Reager bevarer denne tilstand mellem al den gengivelse, der sker. useStatereturnerer et par, der har den aktuelle tilstandsværdi og en funktion, der lader dig opdatere værdien.

Du kan ringe til denne funktion fra en begivenhedshåndterer eller fra et andet sted. Det ligner this.setStatei en React-klasse, men det fusionerer ikke den gamle og nye stat helt.

Der er kun et argument til det, useStateder er den oprindelige tilstand. I dette eksempel givet ovenfor er den oprindelige tilstand, 0fordi vores tæller starter fra nul. Bemærk, at i modsætning this.statehertil ikke staten her nødvendigvis skal være et objekt - men det kan være et objekt, hvis du vil.

Erklæring om flere tilstandsvariabler

Matrixdestruktureringssyntaxen giver forskellige navne til de tilstandsvariabler, som vi erklærede ved at kalde useState. Disse navne hører ikke til en del af useStateAPI'et. I stedet antager React, at hvis du ringer meget mange gange, gør du det i samme rækkefølge i løbet af hver gengivelse.

Bemærk: Kroge er funktioner, der giver dig mulighed for at "tilslutte" React-tilstand og livscyklusfunktioner fra funktionskomponenter. Kroge fungerer ikke inden for React-klasser - de giver dig mulighed for at bruge React uden klasser.

Effektkrog

Når du arbejder med React, har du muligvis allerede arbejdet med at hente data, abonnementer eller manuelt ændre DOM fra React-komponenter. Vi kalder disse operationer som “bivirkninger” (eller kort sagt “effekter”).

Effektkrogen,, useEffecttilføjer muligheden for at udføre bivirkningerne fra en funktionskomponent. Det har det samme formål som componentDidMount, componentDidUpdateog componentWillUnmounti React-klasser, men samlet i en enkelt API.

For eksempel indstiller nedenstående komponent dokumenttitlen, efter at React opdaterer DOM:

Link til CodeSandbox

Når du ringer til useEffect, beder du React om at køre din "effekt" -funktion efter skylning af ændringer i DOM. Effekter erklæres inde i komponenten og har således adgang til dens rekvisitter og tilstand. Som standard kører React effekterne efter hver gengivelse, der sker - inklusive den første gengivelse.

Regler for kroge

Kroge er JavaScript-funktioner, men de har to yderligere regler:

  • Ring kun til kroge på øverste niveau . Forsøg ikke at kalde Hooks inde i sløjfer, betingelser eller indlejrede funktioner.
  • Ring kun til kroge fra React-funktionskomponenter . Forsøg ikke at ringe til Hooks fra almindelige JavaScript-funktioner.

Nå, dette er et hurtigt blik på React Hooks. For mere detaljeret beskrivelse følg dette link nedenfor:

Overblik over kroge - Reager

Et JavaScript-bibliotek til opbygning af brugergrænseflader reactjs.org

Glad læring! ? ?