Den etterlengtede React v18 ble endelig utgitt for noen måneder siden. Selv om det ikke var noen store endringer, ble det lagt til noen interessante funksjoner som er verdt å ta en titt på. Denne artikkelen vil gå over noen nye tillegg og hvordan du oppgraderer til React v18.

Hvordan oppgradere til React 18

For å installere den nyeste versjonen av React kjør denne kommandoen i en terminal:

npm installere reagere reager-dom

Eller hvis du bruker garn:

garn legg reager reager-dom

Når du har installert den nyeste versjonen, kan du begynne å dra nytte av dens nye funksjoner.

Det er flere tillegg i React 18; her er fire av de mest bemerkelsesverdige.

1. Strenge modus

StrictMode er en funksjon du kan bruke til å fremheve potensielle problemer i en applikasjon. Strenge moduskontroller kjøres kun i utviklingsmodus og vil ikke påvirke produksjonsbygget. Imidlertid kan de være svært nyttige for å identifisere potensielle problemer i koden din.

Du kan aktivere streng modus for alle deler av programmet. Du kan for eksempel aktivere det for alle komponentene dine, eller bare for noen av dem.

instagram viewer 
import Reagere fra 'reagere';
funksjonDemoeksempel() {
komme tilbake (
<div>
<FirstComponent />
<Reagere. StrictMode>
<SecondComponent />
<ThirdComponent />
</React.StrictMode>
<Fjerdekomponent />
</div>
 );
}

I koden ovenfor vil alle fire komponentene bli sjekket for potensielle problemer. Imidlertid vil strenge moduskontroller kun gjelde for og .

StrictMode hjelper også på andre måter, for eksempel:

  • Identifisering av komponenter med usikker livssyklus: Hvis en komponent har en livssyklusmetode som er merket som usikker, vil streng modus advare deg om det.
  • Advarsel om bruk av eldre strengref API: Hvis du bruker den gamle strengref API, vil den strenge modusen advare deg om bruken.
  • Advarsel om utdatert findDOMNode-bruk: Hvis du bruker den utdaterte findDOMNode API, vil den strenge modusen advare deg om det.
  • Oppdage uventede bivirkninger: Hvis en komponent utløser bivirkninger (som setState) på uventede steder, vil den strenge modusen advare deg om det.
  • Oppdager eldre kontekst-API: Hvis du bruker den eldre kontekst-APIen (som nå er avviklet), vil den strenge modusen advare deg om det.
  • Sikre gjenbrukbar tilstand: Hvis du har en tilstand som brukes av flere komponenter, vil streng modus bidra til å sikre at den er riktig synkronisert.

Totalt sett kan streng modus være en nyttig funksjon i utviklingen for å hjelpe med å identifisere potensielle problemer i koden din.

2. Overganger

Overganger lar deg merke visse UI-oppdateringer som ikke-haster. Dette betyr at React kan prioritere andre oppdateringer som er viktigere.

Hvis du for eksempel har to tekstfelt – ett for et søk og ett for dets resultater – vil du merke søkeresultattekstfeltet som en overgang. På den måten vet React at den ikke trenger å gjengi tekstfeltet på nytt hver gang brukeren skriver noe i søketekstfeltet.

Du kan bruke startTransition-funksjonen til å merke en UI-oppdatering som en overgang. Her er et eksempel:

import { startTransition } fra 'reagere';
startTransition(() => {
// Merk eventuelle ikke-hastende tilstandsoppdateringer inne som overganger
});

Denne koden vil merke alle tilstandsoppdateringer inne i startTransition-funksjonen som overganger. På den måten kan React fokusere på andre viktigere UI-oppdateringer.

3. Automatisk batching

React gir en nyttig funksjon kalt batching som reduserer antall gjengivelser som finner sted når en tilstand endres. Dette kan være svært nyttig for å optimalisere ytelsen, spesielt når arbeider med asynkron kode.

Tidligere, hvis du hadde et løfte eller foretok en nettverksanrop, ville ikke tilstandsoppdateringene bli gruppert, og React måtte gjengi flere ganger. Imidlertid, med automatisk batching i React 18, blir alle tilstandsoppdateringer gruppert, selv innenfor løfter, setTimeouts og tilbakeringing av hendelser. Dette reduserer arbeidet som React må gjøre i bakgrunnen betydelig.

Du kan batch-statusoppdateringer manuelt ved å bruke flushSync-funksjonen, men fra og med React 18 er denne prosessen nå automatisk. Dette resulterer i mye bedre ytelse, ettersom React vil vente til en mikrooppgave er ferdig før den gjengis.

4. Nye kroker

Versjon 18 introduserer mange nye Reager kroker, inkludert useId, useTransition og useDeferredValue. Disse nye krokene gir en flott måte å legge til ekstra funksjonalitet til React-appene dine med minimal innsats.

React 18 gir økt appytelse

React 18 er her, og den bringer med seg noen store forbedringer i nettappytelsen. Med den nye versjonen av React kan du enkelt lage nettapper som er mer responsive og gir bedre ytelse totalt sett. Så hvis du ønsker å lage en nettapp som kjører jevnt og ser bra ut, må du sjekke ut React 18.