Ved hjelp av Reagere Lastbare for Kode Splitting av Komponenter og Ruter

0
43

I et forsøk på å ha web-applikasjoner tjene behovene for ulike typer av brukere, er det sannsynlig at mer kode enn det ville være for en type bruker, slik at appen kan håndtere og tilpasse seg ulike scenarier og bruke tilfeller, noe som fører til nye funksjoner og funksjonalitet. Når dette skjer, er det rimelig å forvente at resultatene av en app til å synke som codebase vokser.

Koden splitting er en teknikk der en søknad bare laster code det er behov for i øyeblikket, og ikke noe mer. For eksempel, når en bruker går til en hjemmeside, det er sannsynligvis ikke nødvendig å laste inn koden som driver en backend-oversikten. Med kode splitting, kan vi sørge for at koden for startsiden din er den eneste koden som laster inn, og at cruft opphold ut for en mer optimal lasting.

Koden splitting er mulig i en Reagerer program som bruker Reagere Lastbare. Det gir en høyere-ordens komponent som kan settes opp til å dynamisk import bestemte komponenter til bestemte tider.

Component splitte

Det finnes situasjoner da vi kanskje ønsker å betinget gjengi en komponent basert på en bruker hendelsen, sier du når en bruker logger på en konto. En vanlig måte å håndtere dette på, er å gjøre bruk av state — komponenten blir gjengitt avhengig logget inn state of the app. Vi kaller denne komponenten splitting.

La oss se hvordan det vil se ut i koden.

Se Penn
Reagerer-Lastbare av Kingsley Silas Chijioke (@kinsomicrote)
på CodePen.

Som et grunnleggende eksempel, la oss si vi ønsker å betinget gjengi en komponent som inneholder en <h2> overskrift med “Hei”. Som dette:

const Hei = () => {
retur (
<Reagere.Fragment>
<h2>Hei</h2>
</Reagere.Fragment>
)
}

Vi kan ha en openHello stat i App-komponent med en initial verdi på forfalskning. Da kan vi ha en knapp som brukes til å veksle mellom staten, enten vise en komponent eller skjule den. Vi vil kaste det inn i et handleHello metode, som ser ut som dette:

klasse App strekker seg til å Reagere.Komponent {
tilstand = {
openHello: false
}

handleHello = () => {
dette.setState({ openHello: !dette.staten.openHello })
}
render() {
retur (
<div className=”App”>
<- knappen for onClick={dette.handleHello}>
Veksle Komponent
</button>

{
dette.staten.openHello ?
<Hei />
: null
}
</div>
);
}
}

Ta en rask titt i DevTools og ta oppmerksom på Nettverk-fanen:

Nå, la oss refactor å gjøre bruk av LoadableHello. I stedet for å importere komponenten rett opp, vil vi gjøre importere ved hjelp av Lastbare. Vi vil starte med å installere reagere-lastbare pakken:

## garn, npm, eller men du ruller
garn legge reagere-lastbare

Nå har det blitt lagt til i prosjektet vårt, trenger vi å importere det inn i app:

import Lastbare fra ‘reagere-lastbare’;

Vi vil bruke Lastbare å lage en “loading” – komponent som vil se ut som dette:

const LoadableHello = Lastbare({
loader: () => importere(‘./Hei’),
lasting() {
retur <div>Laster…</div>
}
})

Vi passerer en funksjon som en verdi å loader som returnerer Hei komponent vi har opprettet tidligere, og vi gjør bruk av import() for dynamisk å importere det. Den fallback UI vi ønsker å gjengi før komponenten er importert returneres ved lasting(). I dette eksemplet, vi er tilbake et div-element, men vi kan også sette en komponent i det i stedet hvis vi ønsker det.

Nå, i stedet for å sende Hei komponent direkte i Appen komponent, vil vi legge LoadableHello til oppgaven slik at den betinget utsagn vil se ut som dette:

{
dette.staten.openHello ?
<LoadableHello />
: null
}

Sjekk ut dette — nå våre Hei komponent laster inn DOM bare når staten er slått av-knappen:

Og det er komponent splitting: evnen til å laste inn en komponent for å laste inn en annen asynkront!

Rute-basert splitting

Alright, så vi så hvordan Lastbare kan brukes til å laste inn komponenter via andre komponenter. En annen måte å gå om det er oss ing rute-basert splitting. Forskjellen her er at komponentene er lagt i henhold til gjeldende rute.

Så, sier en bruker på hjemmesiden til en app, og klikk på en Hei-visningen med en rute til /hei. Komponentene som hører på at ruten ville være den eneste som belastning. Det er en ganske vanlig måte å håndtere splitting i mange apps og generelt fungerer godt, spesielt i mindre kompliserte programmer.

Her er et enkelt eksempel på ruter som er definert i en app. I dette tilfellet har vi to ruter: (1) Hjem (/) og (2) Hei (/hei).

klasse App strekker seg Komponent {
render() {
retur (
<div className=”App”>
<BrowserRouter>
<div>
<Link=”/”>Hjem</Link>
<Link=”/hei”>Hei</Link>
<Slå>
<Rute eksakt path=”/” komponent={Home} />
<Rute path=”/hei” komponent={Hei} />
</Bytte>
</div>
</BrowserRouter>
</div>
);
}
}

Som det står, alle komponenter vil gjøre når en bruker brytere veier, selv om vi ønsker å gjengi en Hei component basert på banen. Jada, det er ikke en stor avtale hvis vi snakker om en få komponenter, men det absolutt kunne være flere komponenter som er lagt til, og programmet vokser i størrelse.

Ved hjelp av Lastbare, vi kan bare importere komponenten vi ønsker ved å skape et lastbare komponent for hver:

const LoadableHello = Lastbare({
loader: () => importere(‘./Hei’),
lasting() {
retur <div>Laster…</div>
}
})
const LoadableHome = Lastbare({
loader: () => importere(‘./Home”),
lasting() {
retur <div>Laster…</div>
}
})
klasse App strekker seg Komponent {
render() {
retur (
<div className=”App”>
<BrowserRouter>
<div>
<Link=”/”>Hjem</Link>
<Link=”/hei”>Hei</Link>
<Slå>
<Rute eksakt path=”/” komponent={LoadableHome} />
<Rute path=”/hei” komponent={LoadableHello} />
</Bytte>
</div>
</BrowserRouter>
</div>
);
}
}

Nå serverer vi den riktige koden til rett tid. Takk, Lastbare!

Hva om feil og forsinkelser?

Hvis de importerte komponenten vil lastes raskt, er det ingen grunn til å blinke en “loading” – komponenten. Heldigvis, Lastbare har evnen til å forsinke legge komponent fra å vises. Dette er nyttig for å hindre den fra å vises for tidlig hvor det føles dumt og i stedet vise det etter en viktig periode av tid som har gått der vi forventer å ha sett det som er lagt.

For å gjøre det, vårt eksempel Lastbare komponenten vil se ut som dette;

const LoadableHello = Lastbare({
loader: () => importere(‘./Hei’),
lasting: Loader,
forsinkelse: 300
})

Her, vi er bestått Hei komponent som en verdi å lasting, som er importert via loader. Standard forsinkelsen er satt til 200ms, men vi har sett oss litt senere for å 300ms.

La oss nå legge til en tilstand til Loader komponent som forteller den for å vise loader bare etter 300ms forsinkelse setter vi har gått:

const Loader = (props) => {
hvis (rekvisitter.pastDelay) {
retur <h2>Laster…</h2>
} else {
return null
}
}

Så Loader komponenten vises bare hvis Hei komponent ikke vis etter 300ms.

reagerer-loader gir oss også en feil prop som vi kan bruke til å returnere feil som er oppstått. Og, fordi det er en rekvisitt, vi kan la det spytter ut det vi ønsker.

const Loader = (props) => {
hvis (rekvisitter.- feil) {
retur <div>Oh no, noe som gikk galt!</div>;
} else if (rekvisitter.forsinkelse) {
retur <h2>Laster…</h2>
} else {
return null;
}
}

Vær oppmerksom på at vi faktisk å kombinere forsinkelse og feil håndtering sammen! Hvis det er en feil av bat, vil vi vise noen meldinger. Hvis det er noen feil, men 300ms har gått, så skal vi vise et loader. Ellers, laste opp Hallo komponent, vær så snill!

Det er en wrap

Er det ikke flott at vi har mer frihet og fleksibilitet i hvordan vi laster og viser code disse dager? Koden splitting — enten ved å komponent eller av rute — er den slags ting Reagerer var designet for å gjøre. Reagerer tillater oss å skrive modulære komponenter som inneholder isolert kode, og vi kan betjene dem når og hvor vi vil, og gir dem mulighet til å samhandle med DOM og andre komponenter. Veldig kult!

Forhåpentligvis gir dette deg en god følelse for kode splitting som et konsept. Som du kan få hendene skitne, og begynne å bruke det, det er verdt å sjekke ut mer i dybden innlegg for å få en dypere forståelse av konseptet.

  • Reagerer Lastbare GitHub Repo – Et perfekt sted for å få alle detaljert dokumentasjon.
  • Innføring Reagere Lastbare – En stor oversikt med forfatteren av biblioteket.
  • Reagerer Lastbare på Frontend Masters – Et kurs undervist av Brian Holt (abonnement kreves)
  • Reagerer s Eksperimentelle Spenning API – EN primer på en annen måte å håndtere lasting stater.
  • Sammenligningen med til å Reagere.lat – Det er noen overlapping mellom de to, og dette innlegget bryter ned hvor de forskjellige.