Sådan udvikler du dine React-superkræfter med HOC-mønsteret

Hey alle sammen! ? Jeg håber, du havde en god, god jul og et godt nytår!

2018 er nået slutningen, og det giver mening for mig at starte det nye år med en artikel om Higher Order Components!

Jeg har lovet dig at skrive om det, da vi har nærmet os emnet, når vi har talt om gengivelsesrekvisitterne og beholdermønstrene, så det giver mening at dybe lidt ned og være opmærksom på det!

Personligt er det ikke et af mine yndlingsmønstre, men det er et kraftfuldt værktøj til at kende, mestre og hænge på dit værktøjsbælte.

Bare husk, at du ikke skal bruge det for meget. Næsten alt, hvad du kan indkapsle i en HOC, kan du helt sikkert implementere ved hjælp af mønsteret til gengivelse af rekvisitter - se min artikel om gengivelse af rekvisitter her - og omvendt.

01. Hvad er en komponent med højere ordre?

En komponent af højere orden (HOC) er en avanceret teknik i React til genbrug af komponentlogik. HOC'er er ikke en del af React API. De er et mønster, der stammer fra React's natur, der privilegerer sammensætning frem for arv.

JavaScript er et velegnet sprog til funktionel programmering, da det kan acceptere højere ordensfunktioner. En højere ordensfunktion er en funktion, der kan tage en anden funktion som et argument og / eller som returnerer en funktion som et resultat.

På samme måde er en højere ordens komponent en funktion, der tager (indpakker) en komponent og returnerer en ny komponent .

Funktioner med højere ordre giver os mulighed for at abstrakte over handlinger, ikke kun værdier.

HOC'er er almindelige i React libs fra tredjeparter, såsom Redux eller React Router. Jeg vedder på, at du har brugt nogle af dem, måske uden at være opmærksom på det.

Hovedformålet med en højere ordrekomponent i React er at dele fælles funktionalitet mellem komponenter uden at gentage kode.

02. Typer af højere ordrekomponenter

Dybest set er der to hovedtyper af HOC-implementering: Props Proxy og Inveritance Inversion .

Props Proxy (ppHOC)

Props Proxy HOC'er udtrykkes elementært som følger:

Det er intet andet end en funktion, propsProxyHOC, der modtager en komponent som et argument (i dette tilfælde har vi kaldt argumentet WrappedComponent) og returnerer en ny komponent med WrappedComponent indeni.

Husk, at når vi returnerer WrappedComponent, passerer vi også gennem de rekvisitter, som HOC modtager. Dette forklarer navnet på denne type: props proxy .

Når vi returnerer den indpakkede komponent, har vi muligheden for at manipulere rekvisitter og til at abstrakte tilstand, endda passere tilstand som en prop ind i den indpakket komponent.

Du kan også pakke den indpakkede komponent med andre JSX-elementer, der ændrer brugergrænsefladen i henhold til dine appbehov.

Props Proxy HOC'er er nyttige i følgende situationer:

  1. Manipulerer rekvisitter
  2. Adgang til forekomsten via refs (vær forsigtig, undgå at bruge refs)
  3. Abstrakt tilstand
  4. Indpakning / komponering af indpakket komponent med andre elementer

Arv Inversion (iiHOC)

Inverterede arvelige HOC'er udtrykkes elementært således:

I denne situation udvider den returnerede klasse WrappedComponent. Det kaldes Inheritance Inversion, for i stedet for at WrappedComponent udvider en Enhancer-klasse, udvides det passivt. På denne måde virker forholdet mellem dem omvendt .

Inveritance Inversion giver HOC adgang til WrappedComponent-forekomsten via dette , hvilket betyder, at du kan bruge tilstanden, rekvisitter, komponentens livscyklus og endda gengivelsesmetoden .

Inversion Inheritance HOC'er er nyttige i følgende situationer:

  1. Gør Highjacking
  2. Manipulerende tilstand

03. At få vores hænder beskidte

Okay alle sammen? For at illustrere lidt de begreber, der er præsenteret ovenfor, lad os lave noget kode.

Hvis du vil spille senere med den kode, vi laver, kan du trække den her fra min repo?.

Lad os prøve at implementere en komponent, der returnerer en velkomstmeddelelse i henhold til brugeren, der er logget ind i systemet.

Jeg har finjusteret min App.js-komponent for at vise tekst og gengive en komponent kaldet Velkommen, som jeg sender prop-brugeren til.

Ok, det kan vi gøre med en simpel komponent som denne:

Men…

Hvad hvis jeg vil have komponenten til at returnere Welcome Guest, hvis ingen bruger er logget ind?

Nå ... Jeg kan gøre det i den samme velkomstkomponent, med et simpelt, hvis det kontrollerer, om brugerstøtten findes, og hvis ikke, returnerer den blot "Velkomstgæst".

Men lad os antage, at jeg vil indkapsle den logik, der skal bruges med flere / forskellige velkomstkomponenter.

Så vejen at gå er at lave en Props Proxy HOC:

Hvad har vi gjort her? Vi holdt vores velkomstkomponent enkel, og vi har oprettet en JavaScript-funktion kaldet withUser, som får velkomstkomponenten (WrappedComponent) som et argument og kontrollerer, om propbrugeren eksisterer. Hvis det ikke gør det, returnerer det bare et simpelt "Velkommen gæst!" besked.

Dette er meget nyttigt. Forestil dig, at du havde 30 velkomstkomponenter på forskellige sprog (fjollet eksempel, men det er meningen at indkapsle logikken til en HOC).

Dejligt, så nu har vi en HOC til at kontrollere, om der er en bruger logget ind, ellers sender den en velkomstgæstemeddelelse!

Lad os forestille os nu, at brugerinfoen kommer fra en ekstern API (for eksempel Auth0) og kommer ind i vores frontend-applikation gennem en Redux reducer, der administrerer App-tilstanden.

Så før vi kontrollerer, om der er en bruger, skal vi kontrollere, om dataene er indlæst i systemet!

Wow! På denne måde kunne vi vise en indlæsningsmeddelelse, mens data ikke indlæses!

Så ... for denne brugssag antager vi, at vi vil lave noget highjacking og gengive en anden ting, hvis data ikke indlæses.

For at gøre highjacking skal vi bruge en iiHOC. Wow! Sådan en tilfældighed! Så lad os gøre det og komponere de to HOC'er sammen alle sammen? Dette rammer hårdt på neglens hoved.

Vær opmærksom på hvad vi har gjort:

Vi har oprettet en withLoader iiHOC, der udvider WrappedComponent. På denne måde kan den få adgang til sine rekvisitter og udløse forskellige gengivelser.

I denne situation får vi isLoaded prop, og hvis den ikke er indlæst, returnerer vi simpelthen en indlæsningsmeddelelse! Ellers lader vi WrappedComponent gengive ved blot at returnere super.render ().

I eksporterklæringen komponerer vi bare to JavaScript-funktioner såsom f1 (f2 (f3))). Intet mere end det!

Der er værktøjer til at komponere funktioner på en pænere måde, men det er en anden historie for en anden artikel!

04. Sidst men ikke mindst

Jeg har forsøgt at bruge enkle eksempler til at forstå begreberne på den mest rene måde.

Mit råd til dig er, at hvis du ikke mestrer disse begreber, bedes du trække min repo her og lege med det lidt.

Tjek koden, og prøv at forstå den linje for linje.

Det tager lidt tid at vænne sig til og føle sig godt tilpas med denne form for abstraktion, så du må ikke miste din motivation eller dit fokus med HOC'er.

Som jeg sagde før, kan alt, hvad vi har gjort her, opnås med render-rekvisitter eller containermønster, så det er ikke et must at vælge en HOC eller to for at lave ren kode med denne form for indkapsling!

Jeg håber, du havde lige så sjovt at læse denne artikel, som jeg havde skrevet den! Hvis du virkelig nød det, så giv mig nogle klapper (ikke mindre end 50 tak)? og husk altid at "være stærk og kode på!"

Også hvis du vil have mere dybe og komplekse forklaringer, er du velkommen til at læse de links, jeg har tilføjet til bibliografisektionen nedenfor?

05. Bibliografi

  1. Reager dokumentation

2. Veltalende Javascript

3. Reager komponenter med højere ordre i dybden

Mange tak!

evedes, dec. 2018