Den længe ventede React v18 blev endelig udgivet for et par måneder siden. Selvom der ikke var nogen større ændringer, var der tilføjet nogle interessante funktioner, som er værd at tage et kig på. Denne artikel vil gennemgå nogle nye tilføjelser og hvordan man opgraderer til React v18.

Sådan opgraderes til React 18

For at installere den seneste version af React skal du køre denne kommando i en terminal:

npm installere reagere reagere-dom

Eller hvis du bruger garn:

garn tilføj reagere reagere-dom

Når du har installeret den seneste version, kan du begynde at drage fordel af dens nye funktioner.

Der er flere tilføjelser i React 18; her er fire af de mest bemærkelsesværdige.

1. Strenge tilstand

StrictMode er en funktion, du kan bruge til at fremhæve potentielle problemer i en applikation. Strenge tilstandstjek kører kun i udviklingstilstand og påvirker ikke produktionsbygningen. De kan dog være meget nyttige til at identificere potentielle problemer i din kode.

Du kan aktivere streng tilstand for enhver del af din applikation. For eksempel kan du aktivere det for alle dine komponenter eller kun for nogle af dem.

instagram viewer 

importere Reagere fra 'reagere';
fungereDemoeksempel() {
Vend tilbage (
<div>
<FirstComponent />
<Reagere. StrictMode>
<Anden komponent />
<ThirdComponent />
</React.StrictMode>
<Fjerdekomponent />
</div>
 );
}

I ovenstående kode vil alle fire komponenter blive kontrolleret for potentielle problemer. Strenge tilstandskontrol vil dog kun gælde for og .

StrictMode hjælper også på andre måder, såsom:

  • Identifikation af komponenter med usikker livscyklus: Hvis en komponent har en livscyklusmetode, der er markeret som usikker, vil streng tilstand advare dig om det.
  • Advarsel om brug af ældre strengref API: Hvis du bruger den gamle streng ref API, vil den strenge tilstand advare dig om brugen af ​​den.
  • Advarsel om forældet findDOMNode-brug: Hvis du bruger den forældede findDOMNode API, vil den strenge tilstand advare dig om det.
  • Opdagelse af uventede bivirkninger: Hvis en komponent udløser bivirkninger (såsom setState) på uventede steder, vil den strenge tilstand advare dig om det.
  • Registrering af ældre kontekst-API: Hvis du bruger den ældre kontekst-API (som nu er forældet), vil den strenge tilstand advare dig om det.
  • Sikring af genanvendelig tilstand: Hvis du har en tilstand, der bruges af flere komponenter, vil streng tilstand hjælpe med at sikre, at den er korrekt synkroniseret.

Generelt kan streng tilstand være en nyttig funktion i udviklingen for at hjælpe med at identificere potentielle problemer i din kode.

2. Overgange

Overgange giver dig mulighed for at markere visse UI-opdateringer som ikke-haste. Det betyder, at React kan prioritere andre opdateringer, der er vigtigere.

Hvis du f.eks. har to tekstfelter – et til en søgeforespørgsel og et til dets resultater – vil du gerne markere søgeresultattekstfeltet som en overgang. På den måde ved React, at det ikke er nødvendigt at gengive det pågældende tekstfelt, hver gang brugeren skriver noget i søgeforespørgselstekstfeltet.

Du kan bruge startTransition-funktionen til at markere en UI-opdatering som en overgang. Her er et eksempel:

importere { startTransition } fra 'reagere';
startTransition(() => {
// Marker alle ikke-hastende tilstandsopdateringer inde som overgange
});

Denne kode vil markere alle tilstandsopdateringer inde i startTransition-funktionen som overgange. På den måde kan React fokusere på andre vigtigere UI-opdateringer.

3. Automatisk batching

React giver en nyttig funktion kaldet batching, som reducerer antallet af gengivelser, der finder sted, når en tilstand ændres. Dette kan være meget nyttigt til at optimere ydeevnen, især når arbejder med asynkron kode.

Tidligere, hvis du havde et løfte eller foretog et netværksopkald, blev tilstandsopdateringerne ikke samlet, og React skulle gengives flere gange. Men med automatisk batching i React 18 er alle tilstandsopdateringer batchede, selv inden for løfter, setTimeouts og event-callbacks. Dette reducerer markant det arbejde, som React skal udføre i baggrunden.

Du kan batch-statusopdateringer manuelt ved at bruge flushSync-funktionen, men fra React 18 er denne proces nu automatisk. Dette resulterer i meget bedre ydeevne, da React vil vente på, at en mikroopgave er færdig, før den genrenderes.

4. Nye kroge

Version 18 introducerer mange nye Reager kroge, herunder useId, useTransition og useDeferredValue. Disse nye kroge giver en fantastisk måde at tilføje ekstra funktionalitet til dine React-apps med minimal indsats.

React 18 leverer øget app-ydeevne

React 18 er her, og det bringer nogle store forbedringer til webapps ydeevne med sig. Med den nye version af React kan du nemt lave web-apps, der er mere responsive og generelt fungerer bedre. Så hvis du ønsker at skabe en webapp, der kører problemfrit og ser godt ud, skal du sørge for at tjekke React 18 ud.