Hvad er nyt i React 18: Nøglefunktioner at prøve

React er et meget populært open source JavaScript-bibliotek skabt af Facebook i 2013. På grund af dens fleksibilitet udnytter mange udviklere nogle af dens funktioner til at bygge hurtige, effektive og genanvendelige brugergrænsefladekomponenter (UI).

I marts 2022 lancerede teamet den seneste og forventede version af React-biblioteket, React 18, som indeholder nye funktioner, der fokuserer på at forbedre applikationens ydeevne.

De nye funktioner i React 18

React 18 består af nogle nyttige nye funktioner tilføjet til open source JavaScript-bibliotek. Mange af disse ændringer var ikke i den tidligere version, mens andre funktioner blev forbedret. Nogle af disse funktioner inkluderer; en ny root API, Automatic Batching, Transition API, Suspense API og udgivelsen af ​​nye Hooks.

Ny root API

Rod-API'en i React holder styr på, hvordan komponenten på øverste niveau gengives i træet. I de tidligere versioner af React er

gengive metoden blev brugt til at udføre rendering, som nu kaldes legacy root API.

React 18 kommer dog med en ny root API, som opretter en root ved hjælp af skabeRoot metode og derefter gengiver en React-komponent til den oprettede rod ved hjælp af gengive metode.

Denne nye root-API giver dig adgang til funktionerne i denne seneste version, såsom overgangs-API-funktionen, der diskuteres senere. Selvom den gamle måde stadig vil fungere i React 18, kan den blive udfaset i fremtiden.

Uddraget nedenfor viser, hvordan root-API'en er struktureret på både den gamle og nye måde.

Ældre root API

importere ReactDOM fra'reaktionsdom';
importere App fra'./App';
ReactDOM.render(<App />, dokument.getElementById('app'))

Ny root API

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

Automatisk batchning

Batching i React involverer flere tilstandsopdateringer i en enkelt gengivelse på hver browserhændelse, f.eks klik på begivenhed. Eventuelle tilstandsændringer, der er sket uden for en begivenhed, såsom et løfte eller tilbagekald, vil ikke blive samlet.

Med React 18 udføres batchstatusopdateringer automatisk, uanset hvor disse opdateringer sker. Denne funktion giver en klar forbedring af ydeevne og gengivelsestid. Men hvis du har en komponenttilstand, som du ikke ønsker at blive batchet, kan du fravælge det ved at bruge flushSync metode. Nedenfor er et eksempel på, hvordan det kan gøres;

importere { flushSync } fra'reaktionsdom';
fungerehandleKlik() {
 flushSync(() => {
 sætTal(tælle => tælle + 1);
]});
 flushSync(() => {
 sætStore(butik => !butik);
});
}

Overgangs-API

I React kan opdateringer foretaget i brugergrænsefladen kategoriseres som presserende, og overgangsopdateringer kaldes også ikke-haster. Et eksempel på en presserende opdatering kan være et tilfælde af indtastning af en tekst i et felt, mens en overgangsopdatering kan være en søgefiltreringsfunktion.

Nu, hvis sådanne opdateringer forekommer samtidigt, kan dette betegnes som en tung operation og kan føre til, at din applikation fryser. For at løse dette problem er det her overgangs-API'en kalder startTransition kommer for at spille. Denne nye funktion fortæller React, hvilke opdateringer der skal markeres som "overgange", hvilket igen forbedrer brugerinteraktioner. Her er et kodeeksempel på, hvordan det virker;

importere { startTransition } fra"reagere";
startTransition(() => {
 setSearch (input);
});

Spænding

Når en applikation gengives på serveren, returneres en statisk HTML-fil til browseren, så brugeren kan se, hvordan appen ser ud, mens JavaScript indlæses. Når filen er indlæst, bliver HTML'en dynamisk med det, der er kendt som hydrering. Manglen her er, at hvis alle disse ikke er på plads, ville din ansøgning ikke blive interaktiv.

For at løse dette problem tilbyder React 18 to nye serverside rendering (SSR) funktioner ved hjælp af Spænding komponent;

• Streaming af HTML gør det muligt at sende dele af en komponent, efterhånden som de bliver gengivet.
• Selektiv hydrering prioriterer interaktiviteten af ​​komponenter valgt af en bruger.

Nye kroge

Et stort vendepunkt for React var introduktionen af kroge i React version 16, som giver funktionskomponenter adgang til tilstande og andre React-funktioner uden at skrive klasser. React 18 leveres med fem nye kroge for at forbedre udviklernes oplevelse;

• useId: Denne hook giver os mulighed for at oprette en unik identifikator (ID) i vores applikation både på serveren og klienten.
• useTransition: Det bruges ved siden af startTransition at oprette en ny tilstandsopdatering, der kan betegnes som ikke-haster.
• useDefferedValue: Det giver mulighed for at udskyde opdateringer, der er mindre presserende.
• useSyncExternalStore: Denne hook er nyttig, når du implementerer abonnementer på eksterne datakilder.
• useInsertionEffect: Denne hook er begrænset til CSS-in-JS-biblioteksforfattere til at injicere stilarter i DOM.

Sådan opdateres til React 18

For at udføre en opdatering kan npm eller garnpakkemanageren bruges ved at køre følgende kommando i terminalen.

npm installere reagere reagere-dom

eller

garn tilføj reagere reagere-dom 

Derefter skal du foretage en ændring af index.js fil i rodmappen i projektets mappe fra den ældre API til den nye rod API som vist tidligere.

Sådan opsætter du et nyt React 18-projekt

For at oprette et nyt React 18-projekt installeres create-react-app-pakken med npm eller garn i terminalen;

npx skab-react-app min-react-app

eller

garn tilføje skab-react-app min-react-app

Forbedre din applikationsydelse med React 18

Nu ved du om nogle nye funktioner i React 18 som den nye root API, Suspense, Transition eller Automatic Batching, og hvordan du opgraderer til denne nye version og sætter den op fra bunden.

Disse seneste ændringer af React er klar til at opleve lige nu.