Hva er nytt i React 18: Nøkkelfunksjoner å prøve

React er et veldig populært JavaScript-bibliotek med åpen kildekode opprettet av Facebook i 2013. På grunn av dens fleksibilitet, utnytter mange utviklere noen av funksjonene til å bygge raske, effektive og gjenbrukbare brukergrensesnittkomponenter (UI).

I mars 2022 lanserte teamet den nyeste og etterlengtede versjonen av React-biblioteket, React 18, som inkluderer nye funksjoner som fokuserer på å forbedre applikasjonsytelsen.

De nye funksjonene i React 18

React 18 består av noen nyttige nye funksjoner lagt til åpen kildekode JavaScript-bibliotek. Mange av disse endringene var ikke i den forrige versjonen, mens andre funksjoner ble forbedret. Noen av disse funksjonene inkluderer; en ny root API, Automatic Batching, Transition API, Suspense API og utgivelsen av nye Hooks.

Ny root API

Rot-API-en i React holder styr på hvordan toppnivåkomponenten gjengis i treet. I de tidligere versjonene av React er gjengi metoden ble brukt til å utføre gjengivelse som nå kalles det eldre rot-API.

Imidlertid kommer React 18 med en ny root API som lager en rot ved hjelp av oppretteRoot metoden og gjengir deretter en React-komponent til den opprettede roten ved hjelp av gjengi metode.

Denne nye root-API-en vil gi deg tilgang til funksjonene i denne nyere versjonen, for eksempel overgangs-API-funksjonen som diskuteres senere. Mens den gamle måten fortsatt vil fungere i React 18, kan den fases ut i fremtiden.

Utdraget nedenfor viser hvordan root-API-en er strukturert både på den gamle og nye måten.

Legacy Root API

import ReactDOM fra'reager-dom';
import App fra'./App';
ReactDOM.render(<App />, dokument.getElementById('app'))

Ny root API

import ReactDOM fra'reager-dom/klient';
import App fra'./App';
konst root = ReactDOM.createRoot(dokument.getElementById('app'));
root.render(<App />)

Automatisk batching

Batching i React involverer flere tilstandsoppdateringer i en enkelt gjengivelse på hver nettleserhendelse, for eksempel en klikk hendelse. Eventuelle tilstandsendringer som skjedde utenfor en hendelse som et løfte eller tilbakeringing vil ikke bli samlet.

Med React 18 gjøres batchstatusoppdateringer automatisk uavhengig av hvor disse oppdateringene skjer. Denne funksjonen gir ut av esken forbedring av ytelse og gjengivelsestid. Imidlertid, hvis du har en komponentstatus som du ikke ønsker å bli batchet, kan du velge bort den ved å bruke flushSync metode. Nedenfor er et eksempel på hvordan det kan gjøres;

import { flushSync } fra'reager-dom';
funksjonhandleKlikk() {
 flushSync(() => {
 setCount(telle => telle + 1);
]});
 flushSync(() => {
 setStore(butikk => !butikk);
});
}

Overgang API

I React kan oppdateringer gjort i brukergrensesnittet kategoriseres som haster og overgangsoppdateringer også kalt ikke-haster. Et eksempel på en hasteoppdatering kan være et tilfelle av å legge inn en tekst i et felt, mens det for en overgangsoppdatering kan være en søkefiltreringsfunksjonalitet.

Nå, hvis slike oppdateringer skjer samtidig, kan dette kalles en tung operasjon og kan føre til at programmet fryser. For å løse dette problemet er det her overgangs-APIet kalte startTransition kommer for å spille. Denne nye funksjonen forteller React hvilke oppdateringer som skal merkes som "overganger", som igjen forbedrer brukerinteraksjonene. Her er et kodeeksempel på hvordan det fungerer;

import { startTransition } fra"reagere";
startTransition(() => {
 setSearch (inndata);
});

Spenning

Når en applikasjon gjengis på serveren, returneres en statisk HTML-fil til nettleseren slik at brukeren kan se hvordan appen ser ut mens JavaScript lastes inn. Når filen er lastet, blir HTML dynamisk med det som kalles hydrering. Mangelen her er at hvis alle disse ikke er på plass, vil ikke søknaden din bli interaktiv.

For å løse dette problemet tilbyr React 18 to nye funksjoner for serversidegjengivelse (SSR) ved å bruke Spenning komponent;

• Streaming av HTML gjør at deler av en komponent kan sendes etter hvert som de blir gjengitt.
• Selektiv hydrering prioriterer interaktiviteten til komponenter valgt av en bruker.

Nye kroker

Et stort vendepunkt for React var introduksjonen av hekter i React versjon 16 som lar funksjonskomponenter få tilgang til tilstander og andre React-funksjoner uten å skrive klasser. React 18 leveres med fem nye kroker for å forbedre utviklernes opplevelse;

• useId: Denne kroken lar oss lage en unik identifikator (ID) i applikasjonen vår både på serveren og klienten.
• useTransition: Den brukes ved siden av startTransition å opprette en ny tilstandsoppdatering som kan betegnes som ikke-haster.
• useDefferedValue: Det lar deg utsette oppdateringer som er mindre presserende.
• useSyncExternalStore: Denne kroken er nyttig når du implementerer abonnementer på eksterne datakilder.
• useInsertionEffect: Denne kroken er begrenset til CSS-in-JS-bibliotekforfattere for å injisere stiler i DOM.

Hvordan oppdatere til React 18

For å utføre en oppdatering kan npm eller garnpakkebehandling brukes ved å kjøre følgende kommando i terminalen.

npm installere reagere reager-dom

eller

garn legg reager reager-dom 

Deretter må du gjøre en endring i index.js fil i rotkatalogen til prosjektets mappe fra det gamle API-et til det nye rot-APIet som vist tidligere.

Hvordan sette opp et nytt React 18-prosjekt

For å sette opp et nytt React 18-prosjekt, installeres create-react-app-pakken med npm eller garn i terminalen;

npx skape-react-app min-react-app

eller

legg til garn skape-react-app min-react-app

Forbedre applikasjonsytelsen din med React 18

Nå vet du om noen nye funksjoner i React 18 som den nye root API, Suspense, Transition eller Automatic Batching, og hvordan du oppgraderer til denne nye versjonen og setter den opp fra bunnen av.

Disse nylige endringene i React er klare for deg å oppleve akkurat nå.